这是我参与「第五届青训营」伴学笔记创作活动的第 15 天，今天在课程中学习了 Webpack 的相关知识，比如 Webpack 的本质是什么以及 Webpack 技术优势、Webpack 的使用等。
什么是 Webpack
Webpack 是一款前端工程化工具。Webpack 可以对前端资源（比如 HTML、CSS、JavaScript 以及各种图片、字体文件等）进行编译、打包。
Webpack 对 TypeScript 以及各种 CSS 预解析器提供了很好的支持。
Webpack 支持 HMR (Hot Module Replacement, 模块热替换) 和开发服务器，可以在本地创建服务器并运行前端项目，在代码修改时，可以进行热更新，立即看到效果。
安装 Webpack
使用 Webpack 首先需要安装 Node.js。安装后可以使用
npm命令。
Webpack 的核心流程
- 入口处理
- 依赖解析
- 资源处理
- 资源合并打包
Webpack 配置
Webpack 配置位于项目根目录的 webpack.config.js 文件中。
在 webpack.config.js 文件中，需要使用 module.exports 导出一个配置对象。
module.exports = {
// 配置项
}
声明入口文件
module.exports = {
//...
entry: "./src/index"
}
声明输出
const path = require("path")
module.exports = {
//...
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist")
}
}
安装和使用 Loader
以 css-loader 和 style-loader 为例：
安装 Loader：
css-loader: github.com/webpack-con… style-loader: webpack.js.org/loaders/sty…
npm add -D css-loader style-loader
在 webpack.config.js 文件中定义 Loader：
module.exports = {
//...
module: {
rules:[
{
test: /\.css/i,
use: ["style-loader", "css-loader"]
}
]
}
}
在入口文件 index.js 使用 CSS Loader：
const styles = require("./index.css")
或者：
import styles from "./index.css"
安装和使用插件
以 html-webpack-plugin 为例：
使用 Webpack 插件 html-webpack-plugin 可以打包生成 HTML 文件。
安装：
npm i -D html-webpack-plugin
在 webpack.config.js 文件中配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//...
plugins: [new HtmlWebpackPlugin()]
}
Webpack 使用 Babel
Babel 可以把使用 ES6/ES7 等“高级”语法编写的 Javascript 代码转换为 ES5/ES3 的“通俗”语法。
Babel 官方文档：babel.docschina.org/docs/en/ind…
Webpack 使用 HMR
HMR (Hot Module Replacement, 模块热替换) 可以在代码经过修改后立即查看效果，极大地提高了开发效率。
在 webpack.config.js 文件中配置开启 HMR：
module.exports = {
//...
devServer: {
hot: true
}
}
Webpack 使用 Tree Shaking
Tree Shaking (树摇) 用于删除项目中用不到的代码。
