npm install uglifyjs-webpack-plugin --save-dev //修改 webpack.prod.conf.js代码 //上线压缩 去除console等信息webpack4.x之后去除了webpack.optimize.UglifyJsPlugin //https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options new UglifyJSPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: false, drop_console: true } } }),
7.提取js公共模块
// webpack4里面移除了commonChunksPulgin插件，放在了config.optimization里面,提取js， vendor名字可改 optimization: { splitChunks: { cacheGroups: { vendor: { // test: /\.js$/, test: /[\\/]node_modules[\\/]/, chunks: "initial", //表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all; name: "vendor", //拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成； enforce: true, } } } }, //项目里配置了自动提取node_modules里用到的模块如jquery，也可以在原模板里面通过第三方cdn引入，又是另一种配置了。
在 webpack.base.conf.js利配置externals后webpack就不会去打包配置模块
externals: { 'jquery': 'window.jQuery' }, //externals就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
8.复制静态资源
npm install copy-webpack-plugin --save-dev //静态资源输出,将src目录下的assets文件夹复制到dist目录下 new copyWebpackPlugin([{ from: path.resolve(__dirname, "../src/assets"), to: './assets', ignore: ['.*'] }]),
9.产出html
npm install html-webpack-plugin --save-dev //修改webpack.base.conf.js代码 // 获取html-webpack-plugin参数的方法 var getHtmlConfig = function (name, chunks) { return { template: `./src/pages/${name}/index.html`, filename: `${name}.html`, // favicon: './favicon.ico', // title: title, inject: true, hash: true, //开启hash ?[hash] chunks: chunks,//页面要引入的包 minify: process.env.NODE_ENV === "development" ? false : { removeComments: true, //移除HTML中的注释 collapseWhitespace: true, //折叠空白区域 也就是压缩代码 removeAttributeQuotes: true, //去除属性引用 }, }; }; //配置页面 const htmlArray = [{ _html: 'index', title: '首页', chunks: ['vendor', 'index']//页面用到的vendor模块 }, { _html: 'login', title: '登录', chunks: ['login'] }, ]; //自动生成html模板 htmlArray.forEach((element) => { module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks))); })
10.性能优化 高大上的可视化分析模块
npm install webpack-bundle-analyzer --save-dev //修改 webpack.prod.conf.js代码 new BundleAnalyzerPlugin() //npm run build 后会打开一个页面
cmd-markdown-logo
通过这个页面可以看到哪些页面是由哪些模块组成的，通过这个可视化页面可以更加方便去定位哪个包臃肿了，然后去优化。
报错 & 解决办法
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
后来发现webpack4不支持extract-text-webpack-plugin 必须下载next版本安装这个插件
npm install extract-text-webpack-plugin@next
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701