目录
1. entry
webpack的入口
// 单文件写法
entry: {
index: '/app/index.js',
about: '/app/about.js',
}
// 多文件写法,将多个文件打包到同一个bundle中
entry: {
index: ['webpack-hot-middleware/client', '/app/index.js'],
vendors: ['react', 'react-dom', 'redux', 'react-router'],
}
2. output
webpack的输出,指示webapck如何输出、以及输出到哪里、输出的格式等。
path:输出文件的目录。
filename:输出的文件名,一般跟entry配置相对应。
chunkFilename:块,非入口entry模块,会自动拆分文件,也就是常说的按需加载,与路由中的require.ensure相对应
publicPath:文件输出的公共路径
output: {
path: path.resolve(__dirname, '/assets'),
// entry中的文件对应的文件名
filename: 'js/[name].js',
// 动态加载的文件对应的文件名
chunkFilename: 'js/[name].[chunkhash:8].js',
publicPath: '/static/',
}
// 按需加载
// webpack会以'./chunk'为新的入口生成一个chunk
// 代码只有执行到import语句时,才会动态加载chunk对应的文件
// import返回一个promise对象,可以调用then方法接受返回值
import(/* webpackChunkName: 'chunkName' */ './chunk').then();
3. hash
常用的hash有三种:
hash:模块标识符,一般应用于filename。
chunkhash:按需加载内容的hash,根据chunk自身的内容计算而来。
contenthash:提取css文件时根据内容计算而来的hash
4. mode
webpack4 新增的
// development,开发环境,代码不会被压缩,开启代码调试
// production,生产环境,会压缩代码,关闭调试
mode: 'development' || 'production';
5. devtool
控制是否生成,以及如何生成source map文件,开发环境下有利于定位问题,默认false。
开启会影响编译速度,所以生产环境要关闭。
devtool: 'eval-source-map';
6. optimization
optimization是webpack4新增的,主要用于开发者自定义优化构建打包的策略配置。
minimize:true/false,告诉webpack是否开启代码最小化压缩。
minimizer:自定js优化配置,会覆盖默认配置,结合UglifyJsPlugin插件使用。
removeEmptyChunks: bool值,检测并删除空的块。
splitChunks:取代了CommonsChunkPlugin,自动分包拆分、代码拆分。
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
7. resolve
配置模块如何解析
extensions:自动解析确定的扩展名,扩展名自动补齐 。
alias:配置路径一些别名。
modules: webpack解析模块时应该搜索的目录。
resolve {
extensions: ['.js', '.jsx', 'css', 'scss'],
alias: {
src: path.resolve(__dirname, '../src'),
},
modules: ['node_modules'],
}
8. module.rules
rules:之前的loaders
test:正则表达式,匹配编译的文件
exclude:排出的文件
include:正好与exclude相反
use-loader:相当于test匹配到的文件的解析器
user-options:配合loader使用,可以是字符串或者对象
modules: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
},
},
'postcss-loader',
'sass-loader'
],
}
],
}
9. 常用的plugin
UglifyJsPlugin 压缩js代码
HtmlWebpackPlugin 自动生成HTML模板,并将打包后的js文件插入HTML中。
MiniCssExtractPlugin 提取css代码