这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
一.什么是webpack?
webpack是一个静态化前端打包器可以把复杂的依赖关系打包为一个或者多个文件，最终生成浏览器可以识别的资源，例如HTML，css，图片，js。除此之外，webpack还支持Babel、Typescript、Eslint和一些css预处理器如Scss、less等，并且可以持续监听持续构建。在打包时Tree shaking和sourceMap也为我们提供了很多的帮助。使用webpack可以大大简化我们的开发。
二.使用webpack
1.安装
npm i webpack webpack-cli -D
2.编辑配置文件
module.exports = {
entry: 'main.js', // 定义当前项目的入口文件
output: { // 定义当前项目的输出文件
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {// 定义一些loader相关的内容，可在下文看到
rules: [{
test: /.less$/i,
use: ['style-loader', 'css-loader', 'less-loader']
}]
}
}
3.执行编译命令
npx webpack
核心流程
1.入口处理
从entry文件开始，启动编译流程
2.依赖解析
从entry文件开始，根据require或者import等语句找到依赖资源
3.资源解析
根据module配置，调用资源转移器，将 png、css 等非标准JS资源转译为 JS 内容
4.资源合井打包
将转译后的资源内容合并打包为可直接在浏览器运行的 JS 文件
递归调用2、3部直到所有资源处理完毕
webpack处理css
1.安装loader
npm add -D css-loader style-loader
2.添加module处理css文件
webpack接入babel
1.安装依赖
npm i -D @babel/core @babel/preset-env babel-loader
2.声明产物出口output
3.执行npx webpack
使用Webpack生成html
1.安装依赖
npm i -D html-webpack-plugin
2.声明产物出口output
3.执行npx webpack
使用Webpack——HMR
Hot Module Replacement——模块热替换（写的代码会被立刻更新到浏览器上）
1.开启HMR
2.执行npx webpack serve
使用Webpack——Tree-Shaking
Tree-Shaking 即树摇，用于删除Dead Code
Dead Code指的是一些代码，他们没有被用到、或者执行结果不会被用到、代码只读不写等
Tree-Shaking开启步骤:
在webpack.config.js中加入如下代码:
mode: "production"
optimization.usedExports: true
