第一章 WebPack5 的基本介绍

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JavaScript、CSS 等语法，才能运行。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

---

WebPack的五大核心概念

Webpack 本身功能是有限的，但是有着 高度可配置性，可以很好满足你的需求。

在开始前你需要先理解一些核心概念：

1. entry 入口

  指示Webpack从哪个文件开始打包，默认值是 ./src/index.js，但你可以通过在 webpack.config.js中配置 entry 属性，来指定一个（或多个）不同的入口起点。

2. output 输出

  指示 Webpack 打包完的文件输出到哪里去，如何命名等，主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

  你可以在webpack.config.js中配置字段output来完成这些处理过程。

3. loader

  webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

4. plugin 插件

  插件可以用于webpack功能扩展的任务。包括：打包优化，资源管理，注入环境变量。

5. mode 模式

通过选择 development（开发模式）, production （生产模式）或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

---

webpack的配置文件

在项目根目录下新建文件：webpack.config.js

// 插件功能：应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
    // 入口 
    entry: './src/index.js', //默认值
    
    // 输出
    output: {
        path: path.resolve(__dirname, "dist"),
    	filename: 'main.js', // 默认值
	},
    
    // loader 加载器
    module: {
        rules: [{ test: /\.txt$/, use: 'raw-loader' }]
    },
    
    // 插件
    plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
    
    // 模式
    mode: 'development', // 开发模式
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范。

---

构建项目

• 项目目录

webpack_project # 项目根目录
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── file1.js
        │   └── file2.js
		|	...
        └── main.js # 项目主文件
        └── index.html # HTML模板
1
2
3
4
5
6
7
8

• 创建上述文件

需要将你打包的文件引入main.js中，否则webpack不会对该文件进行打包。

文件名：file1.js

export default function add(x, y) {
  return x + y;
}
1
2
3

文件名：main.js

import add from "./js/add";
1

• npm初始化项目

npm init -y
1

此操作会产生一个package.json文件，可以在文件中修改你的项目名称、依赖、版本等信息。

需要注意的是项目名称不能webpack否则下一步会报错。

• 安装所需依赖

npm install webpack webpack-cli -D
1

在此建议将npm镜像使用nrm use taobao 更换为淘宝镜像，下载依赖更快。

• 启动webpack

开发模式：

npx webpack ./src/main.js --mode=development
1

生产模式：

npx webpack ./src/main.js --mode=production
1

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）

• 查看结果

查看控制台是否报错。是否生成有输出文件在目录./dist目录中。

此时的webpack只能处理 js 资源，一旦遇到 css 等其他资源就会报错。