32、webpack详细配置
33、webpack详细配置之entry
entry: 入口起点
-
string --> './src/index.js'，单入口
打包形成一个 chunk。 输出一个 bundle 文件。此时 chunk 的名称默认是 main
-
array --> ['./src/index.js', './src/add.js']，多入口
所有入口文件最终只会形成一个 chunk，输出出去只有一个 bundle 文件。
（一般只用在 HMR 功能中让 html 热更新生效）
-
object，多入口
有几个入口文件就形成几个 chunk，输出几个 bundle 文件，此时 chunk 的名称是 key 值
特殊用法：
entry: {
// 最终只会形成一个chunk, 输出出去只有一个bundle文件。
index: ['./src/index.js', './src/count.js'],
// 形成一个chunk，输出一个bundle文件。
add: './src/add.js'
}
34、webpack详细配置之output
output: {
// 文件名称（指定名称+目录）
filename: 'js/[name].js',
// 输出文件目录（将来所有资源输出的公共目录）
path: resolve(__dirname, 'build'),
// 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
publicPath: '/',
chunkFilename: 'js/[name]_chunk.js', // 指定非入口chunk的名称
// chunkFilename指的是用js用import的情况下 打包指定非入口chunk的名称
},
35、webpack详细配置之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', // 优先执行
// enforce: 'post', // 延后执行
// 单个loader用loader
loader: 'eslint-loader',
options: {} // 指定配置选项
},
{
// 以下配置只会生效一个
oneOf: []
}
]
},
36、webpack详细配置之reslove（解析模块的规则）
// 解析模块的规则
resolve: {
// 配置解析模块路径别名: 优点：当目录层级很复杂时，简写路径；缺点：路径不会提示
alias: {
$css: resolve(__dirname, 'src/css')
},
// 配置省略文件路径的后缀名（引入时就可以不写文件后缀名了）
extensions: ['.js', '.json', '.jsx', '.css'],
// 告诉 webpack 解析模块应该去找哪个目录
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
}
37、webpack详细配置之devserve
devServer: {
// 运行代码所在的目录
contentBase: resolve(__dirname, 'build'),
// 监视contentBase目录下的所有文件，一旦文件变化就会reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 启动gzip压缩
compress: true,
// 端口号
port: 5000,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启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': ''
}
}
}
}
38、webpack详细配置之optimization(必须要在生产环境下才有意义)
contenthash 缓存会导致一个问题：修改 a 文件导致 b 文件 contenthash 变化。
因为在 index.js 中引入 a.js，打包后 index.js 中记录了 a.js 的 hash 值，而 a.js 改变，其重新打包后的 hash 改变，导致 index.js 文件内容中记录的 a.js 的 hash 也改变，从而重新打包后 index.js 的 hash 值也会变，这样就会使缓存失效。（改变的是a.js文件但是 index.js 文件的 hash 值也改变了）
解决办法：runtimeChunk --> 将当前模块记录其他模块的 hash 单独打包为一个文件 runtime，这样 a.js 的 hash 改变只会影响 runtime 文件，不会影响到 index.js 文件
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build'),
chunkFilename: 'js/[name].[contenthash:10]_chunk.js' // 指定非入口文件的其他chunk的名字加_chunk
},
optimization: {
splitChunks: {
chunks: 'all',
/* 以下都是splitChunks默认配置，可以不写
miniSize: 30 * 1024, // 分割的chunk最小为30kb（大于30kb的才分割）
maxSize: 0, // 最大没有限制
minChunks: 1, // 要提取的chunk最少被引用1次
maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量为5
maxInitialRequests: 3, // 入口js文件最大并行请求数量
automaticNameDelimiter: '~', // 名称连接符
name: true, // 可以使用命名规则
cacheGroups: { // 分割chunk的组
vendors: {
// node_modules中的文件会被打包到vendors组的chunk中，--> vendors~xxx.js
// 满足上面的公共规则，大小超过30kb、至少被引用一次
test: /[\/]node_modules[\/]/,
// 优先级
priority: -10
},
default: {
// 要提取的chunk最少被引用2次
minChunks: 2,
prority: -20,
// 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包
reuseExistingChunk: true
}
} */
},
// 将index.js记录的a.js的hash值单独打包到runtime文件中
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
// 配置生产环境的压缩方案：js/css
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启用sourceMap(否则会被压缩掉)
sourceMap: true
})
]
}