- Entry
webpack在寻找相对文件是会以context为根目录,context默认为执行启动webpack时所在的工作目录,entry的路径及其依赖的模块采用相对于context的路径来描述
// 改变context默认配置
module.exports = {
context:path.resolve(__dirname,'src'),
// entry配置
// 字符串
entry:"./src"
// 数组
entry:["xx1","xx2"]
// 对象: 配置多个入口,每个入口生成chunk
entry:{
a:"./app/entry-a",
b:"./app/entry-b"
}
// 配置动态entry
// 同步
entry:()=>{
return {
a:"./pages/a",
b:"./pages/b"
}
}
// 异步
entry:()=>{
return new Promise((resolve,reject)=>{
resolve({
'a':"./pages/a",
"b":"./pages/b"
})
})
}
}
- output
module.exports={
output:{
fileName:"[name].js",
}
}
- resolve
配置别名
module.exports={
resolve:{
alias:{
components:"src/components"
},
// 用于配置后缀列表
extensions:[".js",".vue",".json"],
// 用于配置模块查找路径
modules:["node_modules","src"]
}
}
- devserver
module.exports={
devServer:{
hot:true, // 配置热更新,更改代码不刷新
inline:true, // 配置实时刷新
historyApiFallback:true, // 配置history模式
headers:{}, // 注入响应头
host:"0.0.0.0", //配置主机
port:8080, //端口
allowedHost:[], //配置白名单
// https:true, // 启用https
// 自己的证书配置
https:{
key:fs.readFileSync('xxx.key'),
cert:fs.readFileSync('xxx.crt'),
ca:fs.readFileSync('xxx.pem')
},
clientLogLevel:"info", // 配置日志级别
compress:true, // 启用gzip压缩
open:true // 自动打开浏览器
}
}
- target
module.exports = {
target:"node"
}
- devtool
module.exports = {
// 开发环境推荐使用source-map,方便调试
devtool:"source-map"
}
- watch
module.exports = {
// 开启监听模式
watch:true,
watchOptions:{
// 不需要监听的文件
ignored:/node_modules/,
// 监听到变化后等300ms再执行
aggregateTimeout:300,
// 轮询文件是否变化
poll:1000
}
}
- externals
module.exports = {
// 告诉webpack哪些库不参与打包
externals:{}
}
- resolveLoader
module.exports = {
resolveLoader:{
// 去哪个目录下查找loader
modules:['node_modules','./loaders']
// 入口文件后缀
extensions:['.js','.json','.ts'],
// 指明入口文件位置的字段
mainFields:['main']
}
}