基础
1.webpack默认只能理解js和json格式的文件
2.打包后识别的顺序从右到左，从下到上
http-server搭设本地服务环境
浏览器不能直接读取require方法，通过引入模块require.js来进行或者使用import形式 Npx
3.配置：
path模块 path.resolve('基于的路径'，‘基于前面写的路径下的路径’)
new HtmlWebpackPlugin 配置打包后的index.html以及相关的bundle配置
output->clean:true 清除上次打包的历史index.html
devtool:"inline-source-map" 将代码报错的地方定位到源代码 而不是打包后的bundle
npx webpack --watch 时刻监听代码变化并自动打包
babel-loader @babel-core @babel/preset-env 配套使用
url-loader比file-loader多了base64功能 name:'[hash:10].[ext]' 设定截取前10位![img]()文件扩展符号
rules
1.type:'asset/resource'
定义generator来定义打包后的文件路径
{ filename:'images/[contenthash](#)' }
或者在output中定义
assetModuleFilename:'images/[contenthash](#)' generator优先级比assetModuleFilename高
2. type:'asset/inline' 图片打包出来无法在打包文件夹中看到文件
3. type:'asset/source' 打包出来的文件无法看到
4. type:'asset' 在 type:'asset/resource'和type:'asset/inline' 之间做自动选择
默认8k就会创建，可以通过设置来设置对应临界值 parser:{ dataUrlCondition:{ maxSize:4*1024*1024 } }
Pulgins
1.设置模式mode:
2..rules内部可以设定outputPath决定打包文件的位置，属于中加入enforce:'pre',也
表示优先执行，在eslint使用enforce优先于babel执行loader
3.解析html
const HtmlWepackPlugin=require('html-wepack-plugin')
plugins:[ new HtmlWepackPlugin({ template:'./src/index.html' }) ]
html-loader处理html中图片，使用common.js
url-loader使用的是es6.js
4.设置node.js中环境变量process.env.NODE_ENV=,如果不设置默认为生产环境
5.optimize插件压缩css
6.代码规则eslint-loader 排除node_modules
7.babel-loader基本兼容性处理 core-js高级兼容性处理，按需加载
8.rules中设置每个loader的use是从下往上读取配置
9.file-loader解决其他资源的配置问题
devServer
devServer 热更新等配置 devServer会把文件放在内存中，所以删除打包文件，打包后代码任然能执行
devserver自动部署功能，改代码wepack自动部署(命令:npx wepack-dev-server)
代码分离：
1.多入口 多出口 会出现重复打包的情况
2.多入口 但处理重复的代码 dependOn:'shared' 配置共享的文件单独打包，将共同的文件抽离成单独的chunk
3.动态导入 新建一个单独文件，处理共享的文件
动态导入的应用
懒加载：使用的是动态导入方法 魔法注释 /*webpackChunkName:'main',* /
预加载 魔法注释 /*webpackPrefetch:true*/
预获取 魔法注释 /*webpackPreload:true*/
防止浏览器缓存
output中设置 filename：‘[name].[contenthash].js’ //只在生产环境配置
热跟新
热更新/热模块替换/HMR: Wepack-dev-server的功能，devser 中hot设置为true
缓存第三方库
optimization->splitChunks:{
cacheGroups:{
vendor:{
test:/[\/]node_modules[\/]/, name:'vendors', chunks:'all'
} } }
拆开开发和生产环境
两个环境的公共路径：output->publicpath
环境变量：module.exports可以写为函数module.exports=（env）=>{} //只在生产环境配置
例如动态修改mode， npx webpack --env production --env goal=local
然后可以设置mode：env.production --env goal=local
optimization ->minimizer:[ new CssMinimizerPlugin()， // 压缩css并且可以制定压缩后的文件
new TerserPlugin(),//压缩代码 ]
代码压缩只会在生产环境 不会再开发环境压缩
webpack-merge 合并webpack配置 const devWebpackConfig = merge（A,B）
基础webpack流程搭建
搭建webpack环境
1.npm init
2.npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
3.创建app.js 和webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={ mode:'development', entry:'./app.js', plugins:[ new HtmlWebpackPlugin() ] }
性能优化
- 针对开发环境
HMR:只打包更新的模块，而不打包所有代码
devServer中设置hot为true 样
式可以使用HMR，style-loader内部默认使用了
js默认不能使用HMR,通过判断module.hot来判断模块是否接受HMR,
html默认不能使用HMR,html文件不能热更新，解决方案:修改entry
devtool:'souce-map' ,source-map调试代码错误
oneOf数组，里面loader只匹配一个loader
- 生产环境
babel缓存cacheDirectory:true
文件缓存 文件名后hash值，js,css用同一个hash值，导致可能改变一个地方，所有的缓存都失效了
chunkhash缓存，如果打包来自同一个chunk，hash值就一样
还是存在同一个hash值问题，如果js中引入css,两者hash值还是一样
contenthash,不同文件生成不同的hash值
tree shaking 打包去掉了多余为运行代码，前提是ES6模块化，开启production环境，sideEffect:false ,
多入口entry多页面应用，单入口spa页面，
wepackChunkName wepackPrefetch:true 预加载
PWA 离线网络也可以访问 加载后注册serviceworker
多进程打包，针对消耗时间比较长的才多进程打包，use
threa-loader放到某个loader后面运行，写法上在use中该loader前面
externals需要忽略的
dll对某些库单独打包
source-map性能优化
resolve alias文件别名 extension 文件扩展，省略文件路径
