webpack4 打包模板配置
配置示例
命令打包:
方式一:
webpack 起始文件 -o 输出文件 --mode=开发模式
-o为--output-path的简写
路径中的.为整个项目的根路径
如:
webpack ./src/index.js -o ./build/build.js --mode=development
webpack ./src/index.js -o ./build/build.js --mode=production
开发环境和生产环境会将es6模块编译成浏览器能识别的模块
生产环境会压缩代码
方式二:
当配置了webpack.config.js后
执行webpack命令即可,webpack 默认执行webpack.config.js
可通过webpack --config 文件路径 指向指定的配置文件
其他命令:
webpack --json 文件名.json 将详细构建chunk信息输入到指定文件里
webpack --profile --json > stats.json 将详细构建chunk信息输入到指定文件里
1、新建文件webpack.config.js
基于node.js的common.js语法
2、使用
方式三:通过命令行生成模版代码：
webpack-cli init
方式一:函数模式
module.exports=(env,argv)=>({
env:--env的参数,和mode无关
argv:所有--指定的参数
如:webpack --env=development --name=jeff
...
})
方式二:直接返回对象
module.exports={
文件上下文,绝对路径,用于从配置中解析入口点(entry point)和加载器(loader)。
context:'默认使用当前目录',
入口文件:
entry:'路径',
entry:['路径1','路径2'],
多入口,但也只会生成一个chunk,即一个文件
entry:{x:'路径1',xx:'路径2'}
多入口可以打包对应的js,而非在一个js里,生成键名对应的chunk
输出示例:
filename: 'src/js/[name].[contenthash:10].js',
path:path.resolve(__dirname,'build')
输出文件:(js文件指定路径,通过修改下面参数的路径即可)
output:{
filename:'输出文件名',
path:'输出路径',
publicPath:'路径前缀' 所有路径的公共路径前缀,如'/',则资源路径为'/xx',‘/’会去服务器根目录下查找,
也可以理解为虚拟路径,不会真正生成,将打包后的文件都放进去,所以引用时只需要引入相同虚拟文件路径下的文件即可
publicPath: 'https://cdn.example.com/assets/', // CDN（总是 HTTPS 协议）
publicPath: '//cdn.example.com/assets/', // CDN（协议相同）
publicPath: '/assets/', // 相对于服务(server-relative)
publicPath: 'assets/', // 相对于 HTML 页面
publicPath: '../assets/', // 相对于 HTML 页面
publicPath: '', // 相对于 HTML 页面（目录相同）
chunkFilename:'[name]xx', 非入口文件生成的chunk,如果命名使用contenhash做缓存时,注意optimization添加runtimeChunk将hash抽取成一个文件
如:
(1)import('xx').then.catch分离的chunk
(2)optimization将node_modules内的文件分离成单独chunk
library:'[name]xx', 库暴露的名称,将打包的文件内容,通过指定的名称暴露出去,不指定时,打包后的文件内容在一个函数里,外部无法访问,var xx=(function(){...})()
libraryTarget:'window', 库的引入方式,默认为'var',library指定的变量添加到window下,即window['指定变量名']使用,浏览器平台使用或者不指定
'global', global.指定变量名,node平台使用
'commonjs', require('指定变量名')
'umd', 将你的 library 暴露为所有的模块定义下都可运行的方式。它将在CommonJS, AMD环境下运行
library和libraryTarget一般在dll时使用
libraryExport:'default', 导出库的哪个属性,_entry_return_表示webpack导出的行为
'default' 入口的默认导出将分配给 library target,即使用时不需要XX.default即import xx from XX即可使用
var MyDefaultModule = _entry_return_.default;
'指定名称的模块'
var MyModule = _entry_return_.指定名称的模块;
本项目内通过library设置的字段直接使用,项目外require后直接使用即可
['模块1','模块2'] 将会解析成路径
var MySubModule = _entry_return_.模块1.模块2;
},
模块处理
module:{
noParse:/正则/或者func(cont){return /正则/.test(cont)}/数组 防止webpack解析那些任何与给定正则表达式相匹配的文件。忽略的文件中 不应该含有 import, require, define 的调用，或任何其他导入机制。
如:/jquery/,jquery中无其他包的依赖项
rules:[ 创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
{ 单个处理器
test:/\.要处理的文件后缀$/,
其他匹配方法:
include:/要处理的文件或文件夹/,：匹配特定条件。一般是提供一个字符串或者字符串数组，但这不是强制的。
include: [
path.resolve(__dirname, "app/styles"),
path.resolve(__dirname, "vendor/styles")
]
exclude:/要处理的文件或文件夹/,排除特定条件。一般是提供一个字符串或字符串数组，但这不是强制的。
and:/\.要处理的文件后缀$/,必须匹配数组中的所有条件
or: /\.要处理的文件后缀$/,匹配数组中任何一个条件
not:/\.要处理的文件后缀$/,必须排除这个条件
enforce:'pre' 优先执行,'post'延后执行
loader:'处理loader',
options:{
loader对应的添加属性,可去官网LOADERS处查看(https://www.webpackjs.com/loaders/)
},
sideEffects:true 表名模块包含副作用,不被tree shaking处理
},
{ 多个处理器
test:/\.要处理的文件后缀$/,
use:['处理loader',{loader:'处理loader',options:{}},...], 多个处理器
},
处理器参数
{
loader:'file-loader',
options:{
name:'[path][name].[ext]' 照片导出名称,默认为hash值,会根据填写路径中的'/'自动生成对应文件夹等
[ext] 资源扩展名
[name] 资源的原名称
[path] 资源相对于context的路径,即文件所在的根文件夹起到文件所在的文件
[hash] 内容的哈希值,如:['hash:10'],提取hash前10位,更多配置如图hashes,<内容>可不写
[数字] 根据匹配结果索引选择上面的内容
outputPath:'从build目录下开始的输出路径' 输出路径如果name也写了路径,可能会有冲突
}
},
{
oneOf:[{ 只匹配其中一个loader
use:'xx'
},{use:'xx'}]
}
]
},
plugins:[ 插件,使用前需要下载后require('xx')导入
new 插件名(),
],
resolve:{ 设置模块如何被解析
alias:{ 路径别名,可以减少从node_modules查找的时间
xx:path.resolve(__dirname, 'src/css/') xx即代表'xxx/src/css'路径,文件使用时 'xx/yy.css'代替相对路径
xx$:path.resolve(__dirname, 'path/to/file.js') 加上$表示精选匹配, 'xx'即代表file.js
},
extensions:[".js", ".json"], 自动解析确定的扩展,默认为js和json,从左往右查找
modules:["node_modules"], 解析模块即modlues中的loader时应该搜索的目录
modules: [path.resolve(__dirname, "node_modules"), "node_modules"], 提供路径可以更快查找,提供的目录优先于node_modules/搜索：
mainFields:['main'], 导入模块时,使用package.json的哪个字段导入模块,指定可减少分析时间
'main': 使用package.json中main字段代表的入口导入模块
['style','main'] 在导入时,会先去根据package.json的style字段表示的路径引入模块,再去'main'字段
如,导入import 'bootstrap'时,配置如上,会先引入bootstrap的.css样式文件,若查找不到样式,才会引入bootstrap的js文件
mainFiles:['index'], 当没有package.json时,指定导入模块入口文件的名称,默认为index.js
plugins:[ 使用的额外的解析插件列表
],
},
使用的属性和resolve中的属性相同,仅用于解析webpack的loader包(包括自定义loader)。
resolveLoader:{
modules: ['node_modules'],
extensions: ['.js', '.json'],
mainFields: ['loader', 'main'],
plugins:[ ],...
},
mode:'development', 模式,或者production
服务器配置
devServer:{
contentBase: path.resolve(__dirname, 'build'), 提供内容的目录
contentBase:['xx','xx',...]
compress: true, 启动gzip压缩
host:'localhost', 域名,默认为'localhost'
port: 3000, 监听端口号
open:true, 自动打开浏览器
hot:true, 开启hmr
watchContentBase: true, 监听contentBase指定的目录文件,发生变化就重载
watchOptions:{ 监听设置
aggregateTimeout: 300, 当第一个文件更改,会在重新构建前增加延迟,将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位：
ignored:/node_modules/ 忽略node_modules内文件,其他写法"files/**/*.js"
},
clientLogLevel:true, 忽略启动日志
quiet:true, 除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
overlay: true, 报错不全屏提示
proxy: { 代理服务器
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}, 路径重写,即路径中'/api'会被替换为空
secure: false, 接受运行在 HTTPS 上，且使用了无效证书的后端服务器
}
},
proxy: [{ 多代理服务器写法
context: ["/auth", "/api"],
target: "http://localhost:3000",
}],
status:''或{}, 自定义构建输出提示信息,与quiet和noInfo搭配无效
},
optimization: { 用于手动配置和覆盖优化
minimize:true, 告知webpack使用TerserPlugin或其它在optimization.minimizer定义的插件压缩 bundle。
splitChunks: {
chunks:'all', 将第三方库单独打包成一个文件,
'async',异步引入的库进行分离
'initial',同步引入的库进行分离
'all',所有引入的库进行分离
minSize:30*1024, 大于30kb才分割
maxSize:0, 最大无限制
maxAsyncRequests:30, 按需加载时并行加载的最大数量
maxInitialRequests:30, 入口js文件最大并行请求数量
minChunks:1, 当提取的chunk文件被引用次数超过1次时才分割
name:true, 运行使用自动命名规则
automaticNameDelimiter:'~' chunk的名称连接符号,如:vendors~main.js
将打包的chunks进行分割,分割成几个chunk(文件)
cacheGroups:{ 可以继承和/或覆盖splitChunks的任何选项。但是test、priority和reuseExistingChunk只能在cache组级别上配置。要禁用任何默认缓存组，将它们设置为false。
xx:{ 表示node_modules会被打包到xx组的chunk中,即生成的chunk名称为:xx~yyy.js
test: /[\\/]node_modules[\\/]/, 匹配node_modules
priority:-10, 优先级
name:'重命名chunks,文件名默认为该对象的键名'
},
yy:{ 其他被引用了2次及以上的模块使用该规则分割
priority:-20,
minChunks:2, 可以重写上面的配置
reuseExistingChunk:true, 当打包的模块和之前打包的模块是同一个,则复用
}
}
},
runtimeChunk:{ 将文件中引入的其他文件的hash值提取成一个文件格式如下,避免进行缓存时,因为文件的内改变使得hash值改变,导致引入该文件的文件内容也发生变化,进而导致重新打包
name: entrypoint => `runtime~${entrypoint.name}`
},
minimizer:[ 配置生产环境的压缩方案(在plugins中的压缩方案也可以写在这里),默认使用TerserPlugin进行压缩,进行配置需要下载该库并引入
new TerserPlugin({ 需要下载'terser-webpack-plugin'并引入,假设命名为TerserPlugin
cache: true, 开启缓存
parallel: true, 开启多进程打包
sourceMap: true, 启有sourceMap
})
]
},
构建代码错误提示
devtool:'source-map', 可能开启后压缩失效
配置是否polyfill或mock某些Node.js全局变量。因为一些库会导入node的一些模块但是浏览器并不使用,通知webpack导入空
watch:true, 监听文件修改,不需要手动输出文件,但需要手动刷新浏览器
或者命令启动 webpack --wach,
webpack --watch --progress, 使用--progress标志，来验证文件修改后，是否没有通知 webpack。如果进度显示保存，但没有输出文件，则可能是配置问题，而不是文件监视问题。
watchOptions:{ 监听文件配置选项
aggregateTimeout: 200, 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。
poll: 1000, 每n毫秒检查一次变动
ignored: ['files/**/*.js', 'node_modules/**'] 采用glob匹配模式,除了数组还可写成单个字符串
}
status:''或{}, 自定义构建输出提示信息
node:{
dns:'empty'
},
这些选项可以控制webpack如何通知「资源(asset)和入口起点超过指定文件限制,false关掉提示
performance:{
}
}
代码示例:
最基础(能打包js+生成html文件并引入打包的js):
