webpack配置详解
Entry
1.单入口：字符串
entry: './src/index.js'
打包形成一个chunk，输出一个bundle文件
2.多入口：字符串数组
entry: ['./src/index.js', './src/count.js']
所有入口最终只会形成一个chunk，且只输出一个bundle文件
3.多入口：对象
entry: {
index: ['./src/index.js', './src/count.js'],
add: './src/add.js'
}
有几个（键值对）文件入口就形成几个chunk，输出几个bundle文件，此时chunk名称==键名，可在dll中使用
Output
output: {
// 文件名称（指定名称+目录）
filename: '[name].js',
// 输出文件目录（将来所有输出资源的公共目录）
path: resolve(__dirname, 'build'),
// 所有输出资源引入公共路径前缀 -- 'imgs/a.jpg'-->'/imgs/a.jpg'
// 一般用于生产环境
publicPath: '/',
// 非入口chunk的名称（import，optimization--node_modules）
chunkFilename: '[name]_chunk.js',
/* dll */
library: '[name]', //整个库向外暴露的变量名
libraryTarget: 'window' //变量名添加到哪个上 browser
// libraryTarget: 'global' //变量名添加到哪个上 node
// libraryTarget: 'commonjs' //用commonjs语法
}
其中library属性，以用dll技术打包jquery库为例
module.exports = {
entry: {
// 最终打包生成[name] --> jquery
// ['jquery'] --> 要打包的库是jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path:resolve(__dirname, 'dll'),
library: '[name]_[hash]' //打包库里向外暴露出去的内容叫什么名字
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]', //映射库的暴露内容名称
path: resolve(__dirname, 'dll/manifest.json') //输出文件路径
})
]
}
Module
module: {
rules: [
// loader
{
test: /\.css$/,
// 多个loader用use
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除node_modules下的js文件
exclude: /node_modules/,
// 只检查src下的js文件
include: resolve(__dirname, 'src'),
// 优先、延后执行
enforce: 'pre', //'post'
// 单个loader用loader
loader: 'eslint-loader',
options: {} //loader的配置
},
{
// 以下配置只会生效一个
oneOf: []
}
]
},
DevServer
devServer: {
// 构建后的项目路径，运行代码的目录
contentBase: resolve(__dirname,'build'),
// 监视contentBase目录下的所有文件，一旦文件变化就会reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
}
//启动gzip压缩
compress: true,
// 端口号
port: 5000,
// 自动打开览器
open: true,
// 域名
host: 'localhost',
// 开启HMR功能
hot: true,
// 不显示启动服务器日志信息
clientLogLevel: 'none',
// 除了一些基本的启动信息外，其他内容不要显示
quiet: true,
// 如果出错了，不要进行全屏显示
overlay: false,
// 服务器代理 -- 解决开发环境跨域问题
proxy: {
// 一旦DevServer（5000）服务器接收到/api/xxx的请求，就会把请求转发到另一个服务器（3000）
'/api': {
target: 'http://localhost:3000',
// 发送请求时，请求路径重写：将/api/xxx --- /xxx (去掉api)
pathRewrite: {
'^/api': ''
}
}
}
}
Resolve
module.exports = {
entry: './src/js/index.js',
output: {
filename: '[name].js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
// loader
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'development',
// 解析模块的规则
resolve: {
// 配置解析模块的路径别名,可以简写路径，但是写路径时没有提示
alias: {
$css: resolve(__dirname, 'src/css')
},
// 配置省略文件路径后缀名
// extensions: ['css', 'jsx'],
// 告诉webpack解析模块式去哪个找目录
modules: [resolve(__dirname, '../../node_modules')]
}
}
Optimization
optimization中的一些默认值：
optimization: {
splitChunks: {
chunks: 'all',
/* 以下都是默认值，可以不写 */
minSize: 30 * 1024, //分割的chunk最小为30kb
maxSize: 0, //最大没有限制
minChunk: 1, //要提取的chunk最少被引用一次
maxAsyncRequests: 5, //按需加载时并行加载的文件数量
maxInitialRequests: 3, //入口js文件最大并行请求数量
automaticNameDelimiter: '~', //名称连接符
name: true, //可用命名规则
cacheGroups: {//分割chunk的组
// node_modules文件会被打包到vendors组的chunk中 -- vendors~xxx.js
// 满足上面的公共规则，如：大小超过30kb，至少被引用一次
vendors: {
test: /[\\/]node_modules[\\/]/,
// 优先级
priority: -10
},
default: {
// 要提取的chunk最少被引用两次
minChunks: 2,
// 优先级
priority: -20,
// 如果当前要打包的模块，和之前已经被提取的模块式同一个，就会复用，而不是重新打包模块
reuseExistingChunk: true
}
}
},
其他配置：
optimization: {
splitChunks: {
chunks: 'all',
// 将当前模块的记录其他模块的hash单独打包为一个文件runtime
// 解决：修改a文件导致b文件的contenthash变化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: {
// 配置生产环境的压缩方案：js，css
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
paraller: true,
// 启动source-map
sourceMap: true
})
}
}
optimization只在production模式下使用
