entry：入口起点
1.string —-> ‘./src/index.js’
打包形成一个chunk。输出一个bundle文件
此时chunk的名称是main
2.array —-> [‘./src/index.js’, ‘./src/add.js’]
多入口
所有入口文件最终只形成一个chunk，输出出去只有一个bundle文件
—> 只有在HMR功能中让html热更新生效
3.object
entry：{
index: ‘./src/index.js’,
add: ‘./src/add.js’
}
多入口
特点：有几个多入口文件就形成几个chunk，输出出去就有几个bundle文件
此时chunk的名称是 key
—> 特殊用法
entry: {
index:[‘./src/index.js’,’./src/count.js’],
add: ‘./src/add.js’
}
output：{
// 文件名称(指定名称+目录)
filename: ‘js/[name].js’，
// 输出文件目录(将来所有资源输出的公共目录)
path：resolve(_dirname,’buid’),
// 所有资源引入公共路径前缀 —> ‘imgs/a.jpg’—>’/imgs/a.jpg’,
publicPath: ‘/‘
chunkFilename: ‘js[name]_chunk.js’ // 非入口chunk的名称
library：’[name]’ // 整个库向外暴露的变量名
libraryTarget：’window’ // 变量名添加到哪个上 window
libraryTarget: ‘global’ // 变量名添加到哪个上node
libraryTarget：’commonjs’
}
module：{
rules：[
// loader的配置
{
test：/.css$/,
多个loader用use
use：[‘style-loader’,’css-loader’]
}，{
test:/.js$/
// 排出node_module下的js文件
exclude：/ node_modules/,
// 只检查src下的js文件
include：resolve(__dirname, ‘src’)
// 优先执行
enforce：’pre’,
// 延后执行
enforce：’post’,
// 单个loader用loader
loader：’eslint-loader’
},
{
// 以下配置只会生效一个
oneOf：[]
}
]
}
resolve // 解析模块的规则
module.exports = {
resolve: {
// 解析模块的规则
alias：{
// 配置解析路径的别名, 优点：简写路径，缺点：写路径是没有提示
$css: resolve(dirname,’src/css’)
}，
// 配置省略文件路径的后缀名
extensions：[‘.js’, ‘.json’, ‘.jsx’, ‘.css’],
// 告诉 webpack 解析模块去哪个目录找
modules:[resolve(dirname,’../../node_modules’),’node_modules’]
}
}
// 开发服务器devServer：用来自动化 (自动编译，自动打开浏览器，自动刷新浏览器)
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
mode：’development,
devServer: {
// 运行代码的目录 (项目构建后路径)
contentBase: resolve(__dirname,’build’),
// 监视contentBase目录下的所有文件，一旦文件变化就会reload
watchContentBase：true，
watchOptions：{
// 忽略文件
ignored: /node_modules/
},
// 启动gzip压缩
compress：true，
// 端口号
port: 3000,
// 域名
host：’localhost’,
// 自动打开浏览器
open：true,
// 开启HMR功能
hot：true，
// 不要显示启动服务器日志
clientLogLevel：’none’，
// 除了一些基本的启动信息外，其它内容都不要显示
quiet：true,
// 如果出错了，不要全屏提示
overlay: false,
// 服务器代理 —> 解决开发环境的跨域问题
proxy：{}
}
optimization: {
splitChunks: {
chunks: ‘all’,
// 下面为默认值，可以不对其进行配置
minSize: 30*1024 // 分割的chunk最小为30kb
maxSize：0 // 没有最大限制
minChunks：1 // 要提取的chunk最少被引用一次
maxAsyncRequests： 5 // 按需加载并行加载文件的最大数量
maxinitialRequests: 3 // 入口js文件最大并行请求数量
automaticNameDelimiter：’~’ // 名称链接符
name：true // 可以使用命名规则
cacheGroups: { // 分割chunk的数组
// node_modules文件会被打包到vendors 组的chunk中 —> vendors~xxx.js
// 满足上面的公共规则，如大小超过30kb，至少被引用一次
vendors：{
test：/[\/]node_modules[\/]/,
// 打包优先级: -10
priority: -10
},
default: {
// 要提取的chunk至少被引用两次
minChunks：2
// 优先级
priority：-20，
// 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
reuseExitingChunk：true
}
}，
// 将当前模块的记录其它模块的hash单独打包为一个文件 runtime
// 解决：修改a文件导致b文件的contenthash变化
runtimeChunk：{
name：entrypoint => runtime-${entrypoint.name}
}，
mininizer：{
// 配置生产环境的压缩方案：js和css
new terserWebpackPlugin({
// 开启缓存
cache：true，
// 开启多进程打包
parallel：true，
// 开启source-map
scource-map: true
})
}
}
}
webpack
自动删除Node.js PolyFill
早期webpack的目标是允许在浏览器中运行大多数Node.js模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack<=4 附带了许多Node.js核心模块的pollyfill，一旦模块使用任何核心模块(即crypto模块)，这些模块就会自动应用。
尽管这使用为Node.js的编写变得容易，但它会将巨大的pollyfill添加到包中，在许多情况下，这些polyfill是不必要的。
webpack5 会自动停止填充这些核心模块，并专注与前端兼容的模块
迁移:
尽可能尝试使用与前端兼容的模块
可以为Node.js核心模块手动添加一个polyfill。错误消息将提示如何实现该目标。
Chunk模块和ID
添加了用于长期缓存的新算法。但在生产模式下默认启用这些功能
Chunk ID
可以不使用import(/ webpackChunkName: “name” / “module”) 在开发环境为chunk命名，生产环境还是有必要的
wbpack内部有chunk命名规则，不再是以id(0, 1, 2)命名了
Output
webpack 4 默认只能输出ES5代码
webpack5 开始新增一个属性 output.ecmaVersion，可以生成ES5/ES6的代码
如：output.ecmaVersion: 2015
SplitChunk
minSize: 30000 // webpack4
minSize: { // webpack 5
javaScript: 30000,
style: 50000,
}
Caching
// 配置缓存
cache: {
// 磁盘存储
type: “filesystem”,
buildDependencies：{
// 当配置修改时,缓存失效
config: [_filename],
}
}
缓存将存储到node_modules/.cache/webpack
监视输出文件
之前webpack 总是在第一次构建时输出全部文件，但是监视重新构建时只会更新修改的文件
此次更细在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件
默认值
entry：”./src/index.js”,
output.path: path.resolve(__dirname,”dist”)
output.filename: “[name].js”
若有收获，就点个赞吧
0 人点赞
