一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。
目的和方案
- 关于方案： 多页面打包通用方案；打包公共库方案；自定义plugin
- 优化的目的
- 优化开发体验
- 优化输出质量
优化构建速度
影响webpack构建速度的原因有两个：一个是loader和plugin方面的构建过程，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间，比如优化构建过程，可以从减少查找过程、多线程、提前编译和Cache多个角度来优化
优化loader查找范围
test include exclude三个配置项来缩小loader的处理范围- 推荐使用
include
//string
include: path.resolve(__dirname, "./src"),
//array
include: [
path.resolve(__dirname, 'app/styles'),
path.resolve(__dirname, 'vendor/styles')
]
注意：exclude的优先级要优于include和test，所以当三者配置有冲突时，exclude会优先于其他两个配置
优化resolve.modules配置
resolve.modules用于配置webpack去那些目录下寻找第三方模块，默认是node_modules，寻找第三方模块，默认是在当前目录下的node_modules里面去找，如果没有找到会去上一级目录查找，如果再没有找到则取../../node_modules查找以此类推，和Nodejs的模块寻找机制很像。
module.exports={
resolve:{
modules: [path.resolve(__dirname, "./node_modules")]
}
}
如果我们的第三方模块都安装在项目的根目录下，就可以直接指明这个路径
优化resolve.alias配置
resolve.alias配置通过别名来将原导入路径映射成一个新的导入路径。
比如引入react库，一般存在两套代码
- cjs采用commonJS规范的js模块化代码
- umd已经打包好的完整代码，没有采用模块化，可以直接执行
alias: {
"@": path.join(__dirname, "./pages"),
react: path.resolve(
__dirname,
"./node_modules/react/umd/react.production.min.js"
),
"react-dom": path.resolve(
__dirname,
"./node_modules/react-dom/umd/react-dom.production.min.js"
)
}
默认情况下，webpack会从入口文件./node_modules/bin/react/index开始递归解析和处理依赖的文件，我们可以指定文件，避免耗时处理
resolve: {
alias: {
"@assets": path.resolve(__dirname, "../src/images/"),
},
},
//html-css中使⽤
.sprite3 {
background: url("~@assets/s3.png");
}
优化resolve.extensions的配置
resolve.extensions在导入语句没到文件后缀时，webpack会自动带上后缀后，取尝试查找文件是否存在
默认值：
extensions:['.js','.json','.jsx','.ts']
- 后缀尝试列表尽量的小
- 导入语句尽量带上后缀
多线程的优化
由于运行在Nodejs之上的webpack是单线程模型，所以webpack需要处理的事情需要一件一件的做，不能多件事情一起做
我们需要webpack能同一时间处理多个任务，发挥多核CPU电脑的能力
thread-loader的优化
它是针对loader进行优化的，它会将loader放置在一个worker池里运行，以达到多线程构建的目的，再使用的时候，需要将其放置在其他的loader之前，上代码！！
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: path.resolve('src'),
use: [
'thread-loader'
]
}
]
}
};
