不用webpack不知道,一接触webpack才知道webpack的强大且繁杂,连续看了好几遍,翻来翻去看了webpack的api配置文档,真的是头大,参数实在太多了,加上各种plugins插件的配置,看了很多遍依然不知道有些参数是干嘛的,必须自己去使用才知道是怎么回事,可能关于文件处理的知识基本是后端用得多,所以前端接触起来开始是有点晕的;
所以我干脆不怎么看webpack的文档了,直接看nuxtjs文档,nuxtjs参数里已经有很多对应webpack配置的选项,基本全在参数build里可以找到,问题是总有些webpack配置是nuxtjs没有的,所以我是既想保留nuxtjs里关于webpack的默认优化设置,又想可以自己另外可以配置webpack的更多参数,合并相同项,但不会覆盖nuxtjs的默认选项,这样才是最优配置吧,nuxtjs和webpack真正分家,所以nuxtjs的build参数里保留了extend参数,目的就是让你另外配置更多webpack参数的,下面直接看小编是怎么做的,nuxt.config.js文件代码献上:
import webpack from 'webpack' const jsdom = require('jsdom'); const {JSDOM} = jsdom; const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window; global.document = document; const window = document.defaultView; const $ = require('jquery')(window);//nuxt.config.js要使用jquery只能这样引用,只在本页面用 export default{ /* ** Nuxt rendering mode ** See https://nuxtjs.org/api/configuration-mode */ mode: 'universal', /* ** Nuxt target ** See https://nuxtjs.org/api/configuration-target */ target: 'server', /* ** Headers of the page ** See https://nuxtjs.org/api/configuration-head */ head: { title: '助梦OA系统' || process.env.npm_package_name , meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Global CSS */ css: [ 'element-ui/lib/theme-chalk/index.css', '@/assets/css/index.css' ], /* ** Plugins to load before mounting the App ** https://nuxtjs.org/guide/plugins */ plugins: [ '@/plugins/index', '@/plugins/element-ui', '@/plugins/common', '@/plugins/verify' ], /* ** Auto import components ** See https://nuxtjs.org/api/configuration-components */ components: true, /* ** Nuxt.js modules */ modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], axios: { proxy: true }, proxy: { '/api': { target: 'http://localhost', pathRewrite: { '^/api' : '/' } } }, /* ** Build configuration ** See https://nuxtjs.org/api/configuration-build/ */ buildDir:'.nuxt', build: { transpile: [/^element-ui/,/^axois/],//需要babel转化的引用 publicPath:'/public/', plugins: [ new webpack.ProvidePlugin({ '$':'jquery' //jquery在.vue文件使用要这样配置 }) ], devtools:false, extractCSS:true, optimizeCSS:true, terser:{ parallel: true, cache: false, sourceMap: false, terserOptions: { compress:{ drop_console:true //生产环境删除所有console }, sourceMap:false } }, html:{ minify:{ minifyCSS:true, minifyJS:true, minifyURLs:true } }, extend(config,nuxtBuildConfig){ //去server/webpack.config.js配置更多webpack的配置 if(!(nuxtBuildConfig.isDev)){ const webpackConfig = require('./server/webpack.config.js'); $.extend(true, config, webpackConfig||{});//这里这么写config = $.extend(true, {}, config, webpackConfig||{})是错误的,webpackConfig不生效,思考下有什么不同? } } }, generate:{ dir:"dist" }, dev:process.env.NODE_ENV !== 'production', router:{ base:'/' }, server:{ host:'0.0.0.0', port:3002 } }
又用回jQuery似乎不太好,你们是不是也这么想的,实际上小编开始也这么想,我们用vue肯定是要抛弃dom操作的,不要再回到拿jQuery来操作dom的时代,但是jQuery用来处理数据的那部分强大的api我们是抛弃不了,比如上面的$.extend()对象深度(deep)合并方法,难道我们要再去写一遍吗?那真是不可想象的,虽然我们 不再用jQuery操作dom来写代码了,但是jQuery拿来处理数据还是很方便的;当然,你想全部方法都自己实现也没人反对的;
我们回到webpack的话题,我看到有很多使用nuxtjs的同学很喜欢在package.json里面进行引用webpack.config.js文件的,如下:
{ "name": "dreamOA", "version": "1.0.0", "private": true, "scripts": { "dev": "webpack --mode='development' --config server/webpack.config.js", "//dev": "nuxt", "//build": "nuxt build", "build": "webpack --mode='production' --config server/webpack.config.js", "start": "webpack --mode='production' --config server/webpack.config.js", "//start": "nuxt start", "generate": "nuxt generate" },
其实小编想说,这样的写法一般用在纯vue框架项目的vue.config.js比较好,但是用在nuxtjs+vue项目上面,这样等于去掉了nuxtjs很多便捷的操作以及一些比较好的优化处理,关键这样写在webpack.config.js又要重写nuxt的dev和build处理命令,感觉不太好; 当然,这样用也是没有任何问题的,自己设置好就行了,下面是webpack.config.js的内容:
const { Nuxt, Builder } = require('nuxt'); const path = require('path'); const app = require('express')(); module.exports = { devtool:false, ...... ...... }
发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。