六. webpack配置详解
6.1 entry
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
/*
entry:入口起点
1.string --> './src/index.js'
打包生成一个chunk。输出一个bundle文件
2.array --> ['./src/index.js','./src/add.js']
多入口
所有入口文件最终只会形成一个chunk,输出数去只有一个bundle文件
--> 只有在HMR功能中让html热更新生效~
3.object
多入口
有几个入口文件就形成几个chunk,输出几个bundle文件
此时chunk的名称是key
--> 特殊用法
{
//所有入口文件最终只会生成一个chunk,输出出去也只有一个bundle文件
index:['./src/index.js','./src/count.js'],
//形成一个chunk,输出一个bundle文件
add:'./src/add.js'
}
*/
module.exports = {
//entry:'./src/index.js',
//entry:['./src/index.js','./src/add.js']
entry:{
index:['./src/index.js','./src/count.js'],
add:'./src/add.js'
}
output:{
filename:'built.js',
path:resolve(__dirname,'built')
},
plugins:[new HtmlWebpackPlugin()],
mode:'development'
}
6.2 output
module.exports = {
entry:'./src/index.js',
output:{
//文件名称(指定名称+目录)
filename:'built.js',
//输出文件目录(将来所有资源输出的公共目录)
path:resolve(__dirname,'built'),
//所有资源引入公共路径前缀 ——> 'imgs/a.jpg' -->'/imgs/a.jpg'
publicPath:'/',
chunkFilename:'js[name]_chunk.js',//非入口chunk的名称
library:'[name]',//整个库向外暴露的变量名
//libraryTarget:'window' //变量名添加到哪个上 browser
libraryTarget:'global' //变量名添加到哪个上 node
},
plugins:[new HtmlWebpackPlugin()],
mode:'development'
}
6.3 module
module.exports = {
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'built'),
},
module:{
rules:[
//loader配置
{
test:'/\.css$/',
//多个loader用use
use:['style-loader','css-loader']
},
{
test:'/\.js$/',
//单个loader用loader
loader:'eslint-loader',
//排除node_modules下的js文件
exclude:/node_module/,
//只检查src下的js文件
include:resolve(__dirname,'src'),
//优先执行
enforce:'pre',
//延后执行
//enforce:'post',
options:{}
},
{
//以下配置只会生效一个
oneOf:[]
}
]
}
plugins:[new HtmlWebpackPlugin()],
mode:'development'
}
6.4 resolve
module.exports = {
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'built'),
},
module:{
rules:[
{
test:'/\.css$/',
use:['style-loader','css-loader']
},
]
}
plugins:[new HtmlWebpackPlugin()],
mode:'development',
//解析模块的规则
resolve:{
//配置解析模块路径别名:优点简写路径 缺点没有
alias:{
$css:resolve(__dirname,'src/css'),
},
//配置省略文件路径的后缀名
extensions:['.js','.json','jsx','.css'],
//告诉webpack解析模块是去找哪个目录
modules:[resolve(__dirname,'../../node_modules'),'node_modules']
}
}
6.5 devServer
module.exports = {
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'built'),
},
module:{
rules:[
{
test:'/\.css$/',
use:['style-loader','css-loader']
},
]
}
plugins:[new HtmlWebpackPlugin()],
mode:'development',
resolve:{...},
devServer:{
//运行代码的目录
contentBase:resolve(__dirname,'build'),
//监视contentBase 目录下的所有文件,一旦文件变化就会relaod
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':''
}
}
}
}
}
6.6 optimization
module.exports = {
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'built'),
},
module:{
rules:[
{
test:'/\.css$/',
use:['style-loader','css-loader']
},
]
}
plugins:[new HtmlWebpackPlugin()],
mode:'development',
//解析模块的规则
resolve:{...,
devServer:{...,
optimization:{
splitChunks:{
chunk:'all',
/*以下默认值,可以不写
minSize:30 * 1024, //分割的chunk最小为30kb
maxSize:0,//没有最大限制
minChunks:1, // 要提取的chunk最少被引用一次
maxAsyncReqeusts: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最少被引用2次
minChunks:2,
//优先级
priority:-20,
//如果当前要打包的模块,和之前已经被提取的模块是同一个,就会服用,而不是重新打包模块
reuseExistingChunkL:true
}
}*/
},
// 将当前模块的记录其他模块的 hash 单独打包为一个文件 runtime
// 解决:修改 a 文件导致 b 文件的 contenthash 变化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
// 配置生产环境的压缩方案:js 和 css
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启动 source-map
sourceMap: true
})
]
}
}