这是我参与「第五届青训营」笔记创作活动的第14天

一、本堂课重点内容：

流程类配置
处理 CSS
接入 Bable
生成 HTML
使用 Webpack - 工具线

二、详细知识点介绍：

1. 核心流程：

读取配置文件，得到入口文件和输出文件的路径。
解析入口文件，把入口文件所依赖的所有文件都读取进来。
对所有文件进行模块化，每个文件都是一个模块，模块间可以互相引用。
将所有模块打包成一个或多个文件，写入输出文件。

2. 模块化：

Webpack支持CommonJS和ES6模块化规范，可以通过require或import导入其他模块。

3. 配置：

Webpack的配置分为两类：流程类配置和工具类配置。

流程类配置，如入口文件、输出文件等，主要是定义打包的流程。

工具类配置，如加载器、插件等，主要是对打包的流程进行扩展。

4. 文件结构：

Webpack的文件结构很灵活，可以根据项目的需求进行调整。一般的文件结构如下：

luaCopy code
project/
├─ dist/
│   ├─ index.html
│   └─ bundle.js
├─ src/
│   ├─ index.js
│   └─ util.js
├─ node_modules/
├─ package.json
├─ package-lock.json
├─ webpack.config.js
└─ README.md

5. 处理CSS：

Webpack可以通过加载器处理CSS文理，比如使用css-loader和style-loader处理.css文件，使用sass-loader处理.sass文件等。

6. Babel：

Babel是一个转换JavaScript语法的工具，可以将ES6+的语法转换为ES5语法。Webpack可以通过babel-loader来使用Babel进行语法转换。

举个例子，如果你的代码中使用了ES6的语法，比如let和const，你需要通过Babel将它们转换为ES5语法，比如var，以便在所有浏览器中都可以正常运行。

三、实践练习例子：

Webpack是一个前端模块打包工具，它可以将多个模块打包成一个或多个文件，以便于浏览器加载。

下面是一个示例：

假设我们有一个JavaScript文件app.js，其中依赖于另一个JavaScript文件util.js：

// util.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './util.js';
console.log(add(1, 2));

我们可以使用Webpack来打包这两个文件，得到一个打包后的文件bundle.js：

// 安装Webpack
npm install webpack webpack-cli --save-dev

// 在项目目录中创建一个webpack配置文件webpack.config.js
const path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

// 执行打包命令
npx webpack

执行完打包命令后，你将在项目的dist目录中看到一个名为bundle.js的文件，这就是我们的打包文件。在HTML中通过<script>标签引入该文件，就可以使用所有依赖的模块了。

四、课后个人总结：

通过今日学习，我们深入了解了Webpack这个前端打包工具。我们了解了Webpack的核心流程，它可以通过读取每个模块的依赖关系，把它们打包成一个文件。我们还了解了Webpack的模块化思想和配置，它可以通过配置文件进行配置，包括流程类和工具类配置。我们了解了Webpack的文件结构，包括入口文件、输出文件、模块等。

Webpack还支持处理CSS和Babel方面的知识，它可以通过加载器对CSS文件进行处理，比如使用css-loader和style-loader处理.css文件。它还可以使用babel-loader对JavaScript语法进行转换，让我们的代码在所有浏览器中都可以正常运行。

Webpack 使用方法 ｜ 青训营笔记