webpack核心概念与安装使用（优雅哥学Webpack5）

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

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

webpack核心概念与安装使用（优雅哥学Webpack5）(1)

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，创建如下目录如结构。（以斜线/结尾的表示目录）

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' }

上面的配置文件配置了：