目的：1、优化开发体验 2、优化输出质量
1、优化开发体验
提升效率
优化构建速度
优化使⽤体验
2、优化输出质量
优化要发布到线上的代码，减少⽤户能感知到的加载时间
提升代码性能，性能好，执⾏就快
01 缩小处理文件的范围 loader
test include exclude三个配置项来缩⼩loader的处理范围
02 resolve.modules配置
指明第三方模块安装的路径， 指定node_modules的位置
03 优化resolve.alias配置
置通过别名来将原导⼊路径映射成⼀个新的导⼊路径，避免查找路径的耗时
04 resolve.extensions配置
在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。
extensions:['.js','.json','.jsx','.ts']
- 后缀尝试列表尽量的⼩
- 导⼊语句尽量的带上后缀。
05 使⽤externals优化cdn静态资源
使⽤时，仍然可以通过 import 的⽅式去引⽤(如 import $ from 'jquery' )，并且希望webpack 不会对其进⾏打包，此时就可以配置 externals 。
06 使⽤静态资源路径publicPath(CDN)
##webpack.config.js
output:{
publicPath: '//cdnURL.com', //指定存放JS⽂件的CDN地址
}
07 MiniCssExtractPlugin 完成抽离css
08 html-webpack-plugin 压缩html
09 development vs Production模式区分打包
npm install webpack-merge -D
const merge = require("webpack-merge")
const commonConfig = require("./webpack.common.js")
const devConfig = {
...
}
module.exports = merge(commonConfig,devConfig)
//package.js
"scripts":{
"dev":"webpack-dev-server --config ./build/webpack.dev.js",
"build":"webpack --config ./build/webpack.prod.js"
}
10 tree Shaking
Dead Code ⼀般具有以下⼏个特征
- 代码不会被执⾏，不可到达
- 代码执⾏的结果不会被⽤到
- 代码只会影响死变量（只写不读）
- Js tree shaking只⽀持ES module的引⼊⽅式！！！！
npm i glob-all purify-css purifycss-webpack --save-dev
develpoment的tree shaking是不⽣效的
11 代码分割 code Splitting
optimization:{
//帮我们⾃动做代码分割
splitChunks:{
chunks:"all",//默认是⽀持异步，我们使⽤all
}
},
12 使⽤⼯具量化
- speed-measure-webpack-plugin:可以测量各个插件和 loader 所花费的时间
- webpack-bundle-analyzer:分析webpack打包后的模块依赖关系
13 HardSourceWebpackPlugin ， 打包第三⽅类库 优化构建性能
- 提供中间缓存的作⽤
- ⾸次构建没有太⼤的变化
- 第⼆次构建时间就会有较⼤的节省
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const plugins = [
new HardSourceWebpackPlugin()
]
14 使⽤happypack并发执⾏任务
运⾏在 Node.之上的Webpack是单线程模型的，也就是说Webpack需要⼀个⼀个地处理任务，不能同时处理多个任务。 Happy Pack 就能让Webpack将任务分解给多个⼦进程去并发执⾏，⼦进程处理完后再将结果发送给主进程。从⽽发挥多核 CPU 电脑的威⼒。
共享进程功能慎用：项目较少的时候，开启happyPack和多线程都是需要时间的，有时候你会发现你构建的时间反而增加了
