1 结构
一个 create-react-app 下 webpack.config.js 的结构如下:
config
├── mode
├── target
├── devtool
├── entry
├── output
├── optimization
│ └── splitChunks
│ ├── chunks
│ ├── name
│ └── cacheGroups
├── resolve
│ ├── modules
│ └── alias
├── resolveLoader
│ └── plugins
├── module
│ └── rules
├── plugins
└── externals
2 详细
2.1 resolve
Configure how modules are resolved. For example, when calling import 'lodash'
in ES2015, the resolve
options can change where webpack goes to look for 'lodash'
(see modules
).
2.1.1 resolve.modules
Tell webpack what directories should be searched when resolving modules.
const path = require('path');
module.exports = {
//...
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
}
};
2.1.2 resolve.alias
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/')
}
}
};
2.2 resolveLoader
This set of options is identical to the resolve
property set above, but is used only to resolve webpack’s loader packages.
module.exports = {
//...
resolveLoader: {
modules: ['node_modules'],
extensions: ['.js', '.json'],
mainFields: ['loader', 'main']
}
};
2.3 optimization
2.3.1 splitChunks.cacheGroups
控制打包分组的?
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async',
minSize: 20000,
minRemainingSize: 0,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};