优雅哥学 Webpack - 01 - Webpack 5 快速体验

程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构

本文摘要：主要讲解 webpack 5 初体验。从webpack 5 初识到便写代码。优雅哥将围绕该主题不断更新系列文章。

1 初识 Webpack 5

webpack 是一个静态资源的打包工具，会以一个或多个文件为入口，将这一个或多个文件直接或间接使用到的所有文件，组合成一个或多个文件输出。输出的文件就是编译好的文件，通常称其为 bundle，可以在浏览器上运行。Webpack 本身能力有限，在不添加 loader、plugin等扩展时能力有限。至于loader、plugin是什么东西，在后面会介绍。

Webpack 能让前端具有

模块化

和

工程化

。关于 webpack，更专业、详细的描述，请看官网描述。

官网地址：https://webpack.js.org
中文地址：https://www.webpackjs.com

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/程序员优雅哥

优雅哥学 Webpack - 01 - Webpack 5 快速体验

1 初识 Webpack 5

2 初始化项目

2.1 创建目录结构

2.2 初始化为npm项目

2.3 安装 webpack 开发依赖

2.4 添加编辑器配置文件（可选）

3 编写代码

3.1 src/js/sum.js

3.2 src/js/str.js

3.3 src/main.js

3.4 template/index.html

3.5 测试运行

4 使用webpack打包

4.1 webpack 配置文件

4.2 配置执行命令

4.3 开发模式打包

4.4 使用生产模式打包

继续阅读

配置Webpack Dev Server 实战操作方法步骤

在Webpack 5 中如何进行 CSS 常用配置？

Webpack学习系列 - Webpack5 怎么集成Babel ？

Webpack干货系列 | 在 Webpack 5 集成 ESLint 的方法

Webpack学习系列 | Webpack 5 集成 HTML 插件高效解决文件路径问题

Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

configuration.devtool should match pattern ......