[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)