webpack 配置详情
entry
配置 webpack.config.js
// webpack.config.js
const { resolve } = require ('path')
const HtmlWebpackPlugin = require ('html-Webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve (__dirname, 'build')
},
plugins: [
// 生成一个html, 引入打包后的 Css 和 js 文件
new HtmlWebpackPlugin ()
],
mode: 'development' // 模式：开发环境
}
entry： 入口起点
单入口
string ---> './src/index.js'
打包形成一个 chunk， 输出一个 bundle 文件。
此时 打包chunk 的名字 默认值 是 main
entry: './src/index.js'
多入口
array ---> [ './src/index.js', './src/add.js' ]
所有入口文件最终只会形成 一个 Chunk,
输出出去只有一个 bundle 文件。
使用场景：html热更新
打包的 chunk 默认名： main
entry: ['./src/index.js', './src/add.js']
object ----> { index: './src/index.js', add: './src/add.js' }
或者
{ // 多个入口最终生成一个chunk
index: ['./src/index.js', './src/count.js']
// 生成一个chunk
add: './src/add.js'
}
有几个 文件入口就形成几个 chunk, 输出几个 bundle 文件
此时 key 就是 chunk 的名字
entry : {
index: './src/index.js',
add: './src/add.js'
}
# 或者 特殊用法
entry : {
// 多个入口最终生成一个chunk
index: ['./src/index.js', './src/count.js']
// 生成一个chunk
add: './src/add.js'
}
output
// webpack.config.js
const { resolve } = require ('path')
const HtmlWebpackPlugin = require ('html-Webpack-plugin')
module.exports = {
entry: './src/index.js',
// 打包出口
output: {
// 文件名称（目录 + 名称）
filename: 'js/[name].js',
// 所有资源输出的公共目录
path: path.resolve(__dirname, 'dist'),
// 所有输出资源引入公共路径前缀
publicPath: '/'
// 非入口chunk的名称
chunkFilename: [name]_chunk.js,
// 整个库对外暴露的变量名
library: '[name]',
// 变量名添加到哪个变量上 window(browser), global(node)
libraryTarget: 'window', // 'global'、'commonjs'
},
plugins: [
// 生成一个html, 引入打包后的 Css 和 js 文件
new HtmlWebpackPlugin ()
],
mode: 'development' // 模式：开发环境
}
module
// webpack.config.js
module.exports = {
// Loader 配置
module: {
rules: [
// loader 的配置
{
test: /.css$/,
// 多个loader 用 use
use: ['style-loder','css-loader']
// 或者
use: [
{ loadr:'style-loder' },
{ loader:'css-loader
]
},
{
test: /.js$/,
// 排除 node_module 文件, 不检查 node_module 下的 js 文件
exclude: /node_module/,
// 只检查 src 下的 js 文件
include: resolve (__diename,'src'),
// 优先执行
enforce: 'pre',
// 延后执行
enforce: 'post',
// 单个loader 用 loader
loader: 'eslint-loader',
option: {}
// 以下配置只会生效一个
oneOf: []
}
]
}
}
resolve
// webpack.config.js
module.exports = {
// 解析模块的规则
resolve: {
// 配置解析模块的路径别名
// 优点：编码时简写路径
// 缺点：没有路径提示
alias: {
'@': path.resolve(__dirname, 'src')
},
// 配置省略文件路径的后缀名
extensions: ['.js', '.json', '.css'],
// 告诉webpack解析模块去哪个目录找
modules: ['node_modules'],
// 绝对路径 告诉webpack解析模块去哪个目录找
modules: [reslove(__diename,'../../node_mo')'node_modules']
},
}
dev server
// webpack.config.js
module.exports = {
// 开发服务器配置， 不要用于生产服务器
devServer: {
// 运行代码的目录
contentBase: resolve(__dirname, 'dist'),
// 监视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: {
// 一旦接收 /api 开头的请求，就会把请求转发到另一个服务器
'/api': {
target: 'http://localhost:3000',
// 发送请求时，请求路径重写, 将/api/xxx 写成 /xxx (去掉 /api)
pathRewrite: {
'^/api': ''
}
}
}
},
}
optimization
// webpack.config.js
const TerserWebpackPlugin = require ('terser-webpack-plugin')
module.exports = {
// optimization 必须要在生产环境配置才有意义
// 优化配置
optimization: {
// 提取公共代码 代码分割
splitChunks: {
chunks: 'all',
// 一下均为默认值，可以不写
// 分割的chunk最小为30kb (文件大小必须是大于30KB,小于30KB是不提取的)
minSize: 30 * 1024,
// 最大没有限制
maxSize: 0,
// 要提取的chunk最少被引用1次
minChunks: 1
// 按需加载时并行加载文件的最大数量
maxAsyncRequests: 5,
// 入口文件最大并行请求数量
maxInitialRequests: 3,
// 名称连接符
automaticNameDelimiter: '~'
// 可以使用命名规则
name: true,
// 分割chunk的组
cacheGroups: {
// node_modules 文件会被打包到vendors组的chunk中： verdors~xxx.js
// 满足上面的公共规则，如：大小超过30kb，至少被引用1次
verdors: {
test: /[\/]node_modules[\/]/,
// 优先级
priority: -10
},
default: {
// 至少被引用2次
minChunks: 2,
// 优先级
priority: -20,
// 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复 用，而不是重新打包模块
reuseExistingChunk: true
}
}
/********* 上面的配置都可以使用默认值, 一般不会去修改 ***********/
},
// 将当前模块的记录其他模块的 hash 单独打包为一个文件 runtime
// 解决： 修改a文件，导致b文件的 contenthash 变化，导致缓存失效
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
// 配置生产环境的压缩方案：js和css
minimizer: [
// webpack verson > 4.26
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启动source-map
sourceMap: true
})
]
},
}
