2021-09-07

webpack 插件

排除其他文件：loader:“file-loader” options:{outputPath:“xxx”}

HtmlWebPackPlugin =>模板插件，打包样式在新的html文件内
MiniCssExtractPlugin =>将css代码从js文件分离出来，替代原style-loader 用MiniCssExtractPlugin.loader

css兼容性处理 postcss–>postcss-loader postcss-preset-env {存在两种配置：默认配置（直接postcss-loader）修改postcss-loader 下一行为配置方法}

env插件帮助postcss找到pack.json中的browserlist里面的配置（自己写配置）
对象的写法
{
loader:“xxx”,
options:{
ident:“postcss”
plugins:(){
env插件
}
}
}
要想生效，还要配置开发环境（默认生产环境）process.env.NOOE_ENV =development

css压缩，插件

语法检查eslint (使用时排除node_modules) 依赖于eslint-loader 和eslint库 配置规则在pack.json中{“eslintConfig”:{“extends”:“airbnb-base”}} 在options中添加 fix:true自动修复
js兼容性处理：用babel-loader和@babel/preset-env（这玩意只能转换基本语法） options：{presets:["@babel/preset-env"]}
另一种全部js做兼容性处理@babel-polyfill(直接import引入，在所用的文件夹内)（过于暴力，所有都做兼容性了）
按需加载 core-js 在 presets配置[useBuiltIns:“usage” ，corejs:{//指定版本version:3}，targets:{//指定浏览器}]
涉及到文件执行顺序，先执行eslint在执行babel

js和html亚索 js压缩直接调整mode html压缩在插件内调整控制项minifiy:{collapseWhitespace:true,removeComments:true}

优化配置

HMR功能：热模块替换 作用：一个模块替换。只会重新打包这一个模块 在热部署添加 hot:true
样式文件：可以使用 js文件：没有HMR功能，如果使用（添加支持hmr代码） html文件（不用HMR（因为只有一个html页面））：没有，同时导致html不能热更新 解决方法，将html引入入口文件

source-map:一种提供源代码到构建后代码的映射技术（如果构建后的代码出错，通过映射追踪源代码的错误）
devtool:“source-map”
可选参数[inline-|hidden-|eval-][noscources-][cheap-[module-]]source-map

oneof:以下loader只会匹配一个（在module中书写rule里面）注意:不能有俩个文件处理同一个loader

缓存：babel(在options添加cacheDirector:true)=>生产环境的优化

tree shaking：去除无用代码
前提 1.必须使用es6代码块 2. 开启生产环境

//重点**
code split
1.可以设置多个入口文件
2.设置optimization配置项 optimization：{splitChunks:{chunks:"all}}
3.通过js代码，让某个文件单独打包成一个chunk
import动态导入语法：将某个文件单独打包，import(“直接引入文件”).then().catch()

懒加载：上边的3
预加载

PWA：渐进式网络开发程序（兼容性问题）前景不太好，回头再看

多线程打包：thread-loader一般给babel用 有利有弊 弊端：进程启动大概600ms，通信进程也有开销，只有工作时间比较长，才需使用 配置项option:{workers:2}//进程数量

externals:忽略作用(将不想使用的包排除在外)

devServer: