不用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,
......
......
}
发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。