什么是Webpack
Webpack是一个前端资源编译、打包工具。
经过Webpack打包后，原始的JS语句会变成webpack_require语句。
Webpack的使用方法
安装
npm install webpack -g
写配置文件
“Webpack的使用，基本都围绕“配置”展开。”
如图是webpack的一个配置文件，其中，
entry(入口起点)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。默认值是./src/index.js，可以在module.exports更改入口。
module.exports = {
entry: './path/to/my/entry/file.js',
};
output(输出)：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。默认值是 ./dist/main.js
loader(加载器)：webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
loader有两个属性：test：识别出哪些文件会被转换；
use：定义出在进行转换时，应该使用哪个 loader。
loader的配置写在一个单独的 module 对象中，他定义了 rules 属性，里面包含两个必须属性：test 和 use。
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
plugin(插件)：插件相比于loader,可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
mode(模式)：可以设置 development, production 或 none 作为mode的参数来启用 webpack 内置在相应环境下的优化，默认值 production。
执行编译命令
npx webpack
了解Webpack的核心流程
入口处理
从entry文件开始，启动编译流程
依赖解析
从entry文件开始，根据require or import等语句找到依赖资源
资源解析
根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
资源合并打包
将转移后的资源内容合并打包为可直接在浏览器运行的JS文件
Webpack的具体使用
我们在配置文件中编写的配置可分为流程类配置和工具类配置。
流程类配置
在配置文件中
entry和output是必须写的。
处理CSS
假如我们想要处理非JS文件，需要使用插件loader。
loaders
安装loader
npm install -D css-loader style-loader
添加module处理相应文件
module:{
rules:[{
//test:过滤条件
test:/\.css/i,
//use:数组或对象，用什么样的loader处理文件
use:[
"style-loader",
"css-loader"
],
}],
思考：Loader有什么作用？为什么这里需要用到css-loader、style-loader
思考：与旧时代——在HTML文件中维护css相比，这种方式会有什么优劣处？
思考：有没有接触过Less、Sass、Stylus这一类CSS预编译框架？如何在webpack接入这些工具？
处理Javascipt
采取接入Babel的方式。
Babel
Babel是一种JS代码转译工具，可以把高版本的JS代码转为低版本的JS代码。
安装依赖
npm i -D @babel/core @babel/preset-env babel-loader
声明出口产物
执行npx webpack
思考：Babel 具体有什么功能?
思考：Babel与Webpack分别解决了什么问题?为何两者能协作到一起了?
处理HTML
安装插件
npm i -D html-webpack-plugin
声明出口产物output
执行npx webpack
思考：相比于手工维护HTML 内容，这种自动生成的方式有什么优缺点?
工具类配置
模块热替换HMR
不用刷新整个浏览器，保存代码就可以看到效果。
开启HMR
module.exports = {
devServer:{
hot:true
}
};
启动Webpack
npx webpack serve
Tree-Sharking
可以用来删除一些没有用到的代码。
开启Tree-Sharking
mode:"production"
和
optimization.usedExports:true
