缩小构建目标
目的：尽可能的少构建模块
比如 exclude 不解析相应的模块，目录。include 只解析解析相应的模块，目录
1
2
3
4
5
6
7
8
9
10
11module: {
rules: [
{
test: /\.js$/,
//?cacheDirectory=true 开启缓存
use: 'babel-loader?cacheDirectory=true',//使用babel-loader解析ES6
exclude: 'node_modules',
include: 'src'
}
]
}
resolve
resolve配置，设置模块如何被解析。通过resolve的配置，可以帮助Webpack快速查找依赖，也可以替换对应的依赖。了解更多
1
2
3
4
5
```json
resolve: {
extensions: [".js",".jsx",".json",".css"]
},1
2
3
4
5
6
7
8
9- 每当引入bootstrap模块的时候，它会直接引入bootstrap,而不需要从node_modules文件夹中按模块的查找规则查找
```javascript
const bootstrap = path.resolve(__dirname, 'node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css');
resolve: {
alias: {
"bootstrap": bootstrap
}
},resolve.modules：告诉 webpack 解析模块时应该搜索的目录
resolve.mainFields：当从 npm 包中导入模块时（例如，import * as D3 from ‘d3’），此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同，默认值也会有所不同
resolve.mainFiles：解析目录时要使用的文件名，默认是index
减少文件搜索范围
优化 resolve.modules 配置（减少模块搜索层级）
优化 resolve.mainFields 配置（优化入口文件分析，搜索过程）
优化 resolve.extensions 配置（缩小扩展名查找范围）
合理使用 alias
1
2
3
4
5
6
7
8resolve: {
alias: {
'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'),
},
extensions: ['.js'],
mainFields: ['main']
},