前言

这是我参与「第五届青训营」笔记创作活动的第17天，在本次课堂上我们学习了webpack使用方法，做此笔记。

一、本堂课重点内容

webpack使用方法

处理CSS
生产HTML

二、详细知识点介绍

webpack使用方法

处理CSS下面是使用 Webpack 处理 CSS 的基本步骤：

安装 style-loader 和 css-loader

style-loader 和 css-loader 是 Webpack 处理 CSS 文件所必须的两个 loader。可以使用以下命令安装它们：
```
npm install style-loader css-loader --save-dev
```
在 webpack 配置文件中配置 loader

在 webpack 配置文件中，需要配置 style-loader 和 css-loader。例如：
```
module: {
  rules: [
    {
      test: /.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
}
```
这段代码告诉 Webpack，当遇到 .css 后缀的文件时，先使用 css-loader 处理它，然后再使用 style-loader 把 CSS 插入到 HTML 中。
在 JavaScript 中导入 CSS 文件

在 JavaScript 文件中使用 import 导入 CSS 文件，例如：
```
import './styles.css';
```
这样，当 JavaScript 文件被加载时，Webpack 会自动处理并插入 CSS 文件。
打包应用程序

最后，使用 Webpack 打包应用程序，生成最终的打包文件。可以使用以下命令进行打包：
```
webpack
```
或者使用以下命令进行开发模式的打包：
```
webpack --mode development
```
打包完成后，Webpack 会生成一个或多个打包文件，其中包含了处理后的 CSS 代码。

以上就是使用 Webpack 处理 CSS 的基本步骤。除了 style-loader 和 css-loader，Webpack 还支持许多其他的 loader 和插件，可以帮助处理和优化 CSS 文件。

生产HTML

Webpack是一个强大的静态模块打包工具，可以将JavaScript、CSS、图片、字体等文件打包成静态资源，同时也支持在打包过程中生成HTML文件。以下是Webpack在生产环境下生成HTML文件的使用方法：

安装相关的插件

Webpack默认并不支持生成HTML文件，需要安装html-webpack-plugin插件。在生产环境中，还需要安装clean-webpack-plugin插件来清除之前打包生成的文件。

可以使用以下命令来安装这两个插件：

npm install html-webpack-plugin clean-webpack-plugin --save-dev

配置webpack.config.js文件

在webpack的配置文件中，我们需要引入这两个插件，并在plugins数组中使用它们：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App', // 生成的HTML文件的title
      template: 'src/index.html' // 使用的HTML模板文件
    })
  ]
};

在上面的代码中，CleanWebpackPlugin用于清除之前打包生成的文件，HtmlWebpackPlugin用于生成HTML文件。HtmlWebpackPlugin的配置中有两个参数，title表示生成的HTML文件的title，template表示使用的HTML模板文件路径。我们可以在模板文件中写入静态资源的引用，例如CSS、JavaScript等。

执行打包命令

在配置好Webpack后，可以使用以下命令来执行打包：

npm run build

执行该命令后，Webpack会根据配置文件进行打包，最终生成HTML文件和其他静态资源文件。

【webpack使用方法|青训营】

前言

一、本堂课重点内容

webpack使用方法

二、详细知识点介绍

webpack使用方法

处理CSS下面是使用 Webpack 处理 CSS 的基本步骤：

生产HTML