[TOC] # webpack-merge https://github.com/survivejs/webpack-merge 我们还是会遵循不重复原则 (Don't repeat yourself - DRY)，保留一个 “通用” 配置。为了将这些配置合并在一起，我们将使用一个名为[`webpack-merge`](https://github.com/survivejs/webpack-merge)的工具。通过 “通用” 配置，我们不必在环境特定 (environment-specific) 的配置中重复代码。 安装`webpack-merge`开始，并将之前指南中已经成型的那些代码再次进行分离： ~~~ npm install -D webpack-merge ~~~ ```js const merge = require('webpack-merge'); const base = require('./webpack.base.js'); module.exports = merge(base, { mode: 'production', devtool: 'source-map', output: { publicPath: '/', }, }); // 作者：任沫 // 链接：https://juejin.im/post/5e8b3e626fb9a03c546c2e60 ``` > [生产环境构建](https://www.webpackjs.com/guides/production/) # webpack-chain https://github.com/neutrinojs/webpack-chain 如果webpack 配置很简单或者直接写死一个对象就行,不推荐引入 webpack-chain，如果有多个配置需要合并的需求,可以引入 webpack-merge 。 Vue CLI3 脚手架生成的项目使用这种方式配置 webpack。 [webpack-chain 项目中文翻译](https://segmentfault.com/a/1190000017547171) # 优化 [An in-depth guide to performance optimization with webpack](https://blog.logrocket.com/guide-performance-optimization-webpack/) ## Happypack [HappyPack](https://www.npmjs.com/package/happypack)通过并行转换文件来加快初始 Webpack 的构建速度 # 构建分析 ## analyse 分析 可以尝试 ``` webpack --profile --json > stats.json ``` 然后将生成的 json 文件上传到 http://webpack.github.io/analyse/ 会有一个直观的认识 [https://huangxsu.com/2018/08/12/webpack-optimization/](https://huangxsu.com/2018/08/12/webpack-optimization/) [Webpack 打包结果分析工具：Webpack Bundle Analyzer](https://rossta.net/blog/webpacker-output-analysis-with-webpack-bundle-analyzer.html) ## 分析工具 [Webpack Visualizer](https://chrisbateman.github.io/webpack-visualizer/)(比较重) [Webpack Analyze](https://webpack.github.io/analyse/) [Source Map Explorer](https://github.com/danvk/source-map-explorer) [Whybundled](https://github.com/d4rkr00t/whybundled) [webpack surviveJS-构建分析](https://lvzhenbang.github.io/webpack-book/zh/optimizing/06_build_analysis.html#%E9%85%8D%E7%BD%AEwebpack) [https://zhuanlan.zhihu.com/p/26710831](https://zhuanlan.zhihu.com/p/26710831) [使用 source-map-explorer 分析前端打包结果进行包体积优化](https://lzw.me/a/source-map-explorer.html)