优雅哥学 Webpack - 01 - Webpack 5 快速体验
程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构
本文摘要：主要讲解 webpack 5 初体验。从webpack 5 初识到便写代码。优雅哥将围绕该主题不断更新系列文章。
1 初识 Webpack 5
webpack 是一个静态资源的打包工具，会以一个或多个文件为入口，将这一个或多个文件直接或间接使用到的所有文件，组合成一个或多个文件输出。输出的文件就是编译好的文件，通常称其为 bundle，可以在浏览器上运行。Webpack 本身能力有限，在不添加 loader、plugin等扩展时能力有限。至于loader、plugin是什么东西，在后面会介绍。
Webpack 能让前端具有 模块化 和 工程化。关于 webpack，更专业、详细的描述，请看官网描述。
2 初始化项目
2.1 创建目录结构
项目根目录为 Webpack_Learning，创建如下目录如结构。（以斜线/结尾的表示目录）
Webpack_Learning/
|- src/
|- js/
|- sum.js
|- str.js
|- main.js
|- template
|- index.html
2.2 初始化为npm项目
yarn init -y
2.3 安装 webpack 开发依赖
使用 webpack，通常需要安装 webpack 和 webpack-cli。由于只在开发时编译打包使用，故只需要安装为开发依赖即可。
yarn add webpack webpack-cli -D
安装完成后，可以在 package.json 文件中查看版本号：
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
2.4 添加编辑器配置文件（可选）
这个步骤非必须，根据自己的喜好就行。由于不同的编辑器有不同的风格，如缩进字符数、末尾是否自动添加空行、缩进使用Tab或空格等，为保持在不同的代码编辑器之间保持代码风格和编码样式一致，出现了一个工具 —— EditorConfig。关于该工具此处不展开，后面会有独立的文章描述。EditorConfig 与 ESLint 相结合，可以最大程度保证团队不同成员之间代码风格一致。常见的主流 IDE （包括 VSCode、WebStorm 等）几乎都支持 EditorConfig。
在项目根目录(Webpack_Learning)下创建 EditorConfig的配置文件：.editorconfig，文件内容如下：
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 120
tab_width = 2
trim_trailing_whitespace = true
3 编写代码
3.1 src/js/sum.js
在该文件中定义并导出一个累加函数。
const sum = (...args) => {
return args.reduce((previous, current) => {
return previous + current
}, 0)
}
export default sum
3.2 src/js/str.js
在该文章中定义并导出计算字符串长度的方法。
const getLength = str => {
return str.length
}
export default getLength
3.3 src/main.js
在main.js 中调用上面两个文件分别定义的函数：
import sum from "./js/sum";
import getLength from "./js/str";
const result = sum(1, 2, 3, 4, 5)
console.log(`sum result: ${result}`)
const len = getLength('Hello Webpack')
console.log(`len: ${len}`)
3.4 template/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Learning</title>
</head>
<body>
<h1>Webpack 5 Learning</h1>
<script src="../src/main.js"></script>
</body>
</html>
index.html 中引入上面编写的main.js，然后在浏览器中运行index.html
3.5 测试运行
在浏览器中运行 template/index.html 文件，在浏览器控制台会发现报错：
main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
这是因为浏览器不识别 ES6 的模块化语法（import/export）。这时候就需要使用 webpack 进行编译打包。webpack 默认情况下支持编译 ES6 的模块化语法。
4 使用webpack打包
要让webpack可以编译打包，至少需要告诉webpack以哪个文件为入口，开始寻找这个文件引入的JS，逐层遍历编译打包。常规的做法是使用配置文件（虽然可以在运行webpack命令时通过参数指定入口文件、输出目录等信息，但一般没那么干的）。
4.1 webpack 配置文件
刚才提到，通过配置文件来告诉webpack从哪儿开始打包。这个配置文件通常位于项目根路径（与package.json同级），一般命名为：webpack.config.js。在根目录下创建这个JS文件。webpack配置文件遵循 CommonJS 规范，故通过module.exports 导出配置对象。
配置文件通常包括5个部分：
1. entry（入口）
告诉webpack从哪个文件开始打包。入口文件的路径是相对于当前文件（webpack.config.js）的路径。如果只有一个入口文件，配置字符串即可；如果是多个入口文件，就配置为字符串数组，数组中的每一项对应一个入口文件。多个入口文件时也可以配置为对象。
2. output（输出）
告诉webpack打包后的文件以什么名字输出到什么地方。通常会配置这几个属性：
- path: 打包后所有资源输出的根路径；
- filename：打包后的JS文件输出文件名（可以携带路径）；
- clean：打包前是否先清空打包输出目录。
3. Loaders（加载器）
由于webpack 本身只能处理 JS、JSON等资源，其他资源需要借助 loader 才能解析。loader在配置文件中配置在module.rules节点下。
4. plugins （插件）
扩展 webpack 的功能。如果需要webpack具有更强的能力，就需要使用 plugins
5. mode （模式）
webpack 有两种打包模式：生产模式 production 和 开发模式 development。两种模式都只能编译 ES 中的模块（Module）语法。但开发模式下不会压缩代码。
现在咱们只需要配置 entry、output、mode即可。 webpack.config.js 配置如下：
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/bundle.js',
clean: true
},
mode: 'development'
}
上面的配置文件配置了：
- 打包的入口文件为 src/main.js
- 输出文件的根路径为项目根路径下的
dist目录 - 打包后的 js 文件输出到
dist/js/bundle.js中 - 每次打包前自动清空
dist目录 - 以开发模式进行打包
4.2 配置执行命令
在 package.json 中添加 scripts 节点，并配置 build 命令：
"scripts": {
"build": "webpack"
},
build 命令调用 webpack 命令。默认情况下，webpack 命令会根据根路径下的 webpack.config.js 文件作为配置，进行打包。
4.3 开发模式打包
由于在配置文件 webpack.config.js 中指定了 mode 为 development，所以现在 build 命令对应的是开发模式打包。
在控制台中执行命令：
yarn build
或者
npm run build
执行完该命令后，显示编译成功，并在项目根目录下生成 dist/bundle.js 目录和文件。
在index.html 中将之前引入的 src/main.js 修改为 dist/bundle.js
<script src="../dist/bundle.js"></script>
在浏览器中重新访问 index.html，可以看到浏览器控制台正确输出结果：
查看编译后的 dist/main.js 文件，会发现代码没有压缩。
4.4 使用生产模式打包
修改 webpack.config.js，将 mode 的值修改为 production，重新执行 yarn build 或 npm run build。
执行完命令后，浏览器控制台依然能正确输出。查看 dist/main.js 文件，会发现该文件中的代码少了很多，被压缩了。
学习webpack的使用，很大程度上是学习 webpack的配置，配置各种loader和plugin，通过loader 和 plugin来增强webpack对资源的处理能力。
今日优雅哥学习结束，期待留言分享~~
了解更多公众号：youyacoder/程序员优雅哥
