webpack笔记
Webpack
1.静态模块打包工具，将.scss .ts 打包成浏览器识别的文件
2.模块化有 ESModule CommonJS AMD CMD
3.webpack和gulp rollup vite
4.loader处理文件的转换，plugin用于打包优化，资源管理，环境变量注入
5.browserslistrc //筛选浏览器
Loader:
Css-loader
Style-loader
Postcss-loader postcss-preset-env
plugin:
clean-webpack-plugin
html-webpack-plugin
const { DefinePlugin } = require("webpack"); //定义全局变量
copy-webpack-plugin //复制静态文件到打包文件中
5.source-map打包文件会生成一个映射文件，方便运行中出现错误，快速定位出问题代码的位置
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
Inline 会生成source-map以Dateurl添加到bundle文件后面
hidden 会生成source-map 但是删除bundle文件的source-map的引入
eval 会生成source-map 以Dateurl添加到eval函数里
nosources会生成source-map不会生成的source-map的源文件，但是有错误提示
cheap 会生成source-map但是更高效（不会生成列的映射）
module 会生成source-map对loader编译后的代码处理更好
开发，测试阶段最好是cheap-module-source-map
发布阶段 不写或false
6.babel是什么？,开发中的ES6和TS浏览器不能识别，所以需要babel帮我们语法转换，源代码转换，Polyfill实现目标缓解的功能。
代码的编译过程 ES6->AST->bateCode->字节码
和postcss一样可以直接使用，postcss src/word.css -o css/demo.css
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
Babel的使用需要配合其他的插件使用
比如转换尖头函数需要使用@babel/plugin-transform-arrow-functions
如果需要插件很多我们就需要使用预设presets，他会根据我们的browserslistrc过滤的浏览器自动适配
presets: [
@babel/preset-env"
]
7.polyfill填充物 帮我处理浏览器不兼容的语法糖（promise，generator，symbol）,帮我们添加
function promise() {}
使用配合presets
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: "3",
},
],
],
8.ts的打包处理
第一种ts-loader
第二种babel-loader @babel/preset-typescript
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: "3",
},
],
["@babel/preset-typescript"]
],
9.vue文件的打包处理
vue-loader
vue-template-compiler
10.ESlint eslint-loader打包的时候校验eslint
11.webpack的 package.json的命令加 —watch
webpack.config.js 的选项 watch:true
12.webpack-dev-server
是否开启热更新
server:{
hot: true
}
对js文件需要监听变化
if (module.hot) {
module.hot.accept("./js/math.js", () => {
console.log("文件更新了");
});
}
vue文件的vue-loader支持vue组件的HMR
热更新的原理：socket的长链接
13.服务运行优化，这个设置是默认打开
compress是否为静态文件开启gzip
14.跨域代理proxy
15.historyApiFallback 跳转路由子后刷新页面就会404，historyApiFallback会帮我们映射到首页
16.resolve alias地址代理， extensions匹配运行文件的后缀
resolve: {
extensions: [".js", ".json", ".wasm", ".vue", ".ts", ".jsx"],
alias: {
"@": path.resolve(__dirname, "./src")
}
},
- 配置文件分离—env 添加环境变量
"build": "webpack --config ./config/webpack.common.js --env production",
"dev": "webpack server --config ./config/webpack.common.js --env development",
module.exports = function (env) {
process.env.production = env.production; // 把环境变量放到node的process
const config = env.production ? prodConfig : devConfig;
const mergeConfig = merge(common, config);
return mergeConfig;
};
18.代码分离
多入口
optimization
splitChunks
runtimeChunk
19.代码的预获取和预加载
Prefetch和preload
/* webpackPrefetch: true */
20.cdn的使用
externals:{
Vue: “vue”
}
21.css的代码打包到文件mini-css-extract-plugin
帮我们把css文件打包到一个文件
22，hash
hash值的生成和整个项目有关系
chunkhash可以有效的解决上面的问题，它会根据不同的入口进行借来解析来生成hash值
contenthash表示生成的文件hash名称，只和内容有关系
23，terser
Terser是一个JavaScript的解释（Parser）、Mangler（绞肉机）/Compressor（压缩机）的工具集；
配置链接：https://github.com/terser/terser#minify-options
24，css的压缩工具css-minimizer-webpack-plugin
25.sideEffects删除引用但是没有使用的代码，一般直接是false
26,CSS的Tree Shaking：PurgeCSS
27,作用域提升webpack已经内置
new webpack.optimize.ModuleConcatenationPlugin()
28,webpack对文件压缩 compression-webpack-plugin
29.InlineChunkHtmlPlugin
将打包好的文件注入到html中，减少http请求
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime.+[.]js/])
30,自定义loader,就是一个函数，接受content就是文件进行处理，最后通过我们的函数处理
31，loader的执行顺序从后往前，原理：1,2,3存到pitch-loader的时候，从上往下执行，
变成3，2，1，取得时候normer-loader从上往下执行就是先运行3
如何修改loader的执行顺序，通过enforce修改pre,post
32.loader函数同步执行和异步执行
module.exports = function (content) {
content+=‘123’;
console.log(123)
}
同步
直接return content 或者callback(null, content)
异步
const callback = this.async()
callback(null, content)
33.自定义loader函数传参并校验
我们可以通过一个webpack官方提供的一个解析库 loader-utils，安装对应的库
我们可以通过一个webpack官方提供的校验库 schema-utils，安装对应的库
34,自定义plugin添加webpack的功能