处理 CSS 文件

一. 实现 webpack 项目初始化及相关包和插件的安装

• 可以参考：

初识 Webpack_小豪boy的博客-CSDN博客一、Webpack是什么webpack是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件。webpack可以处理的模块包括js/css/图片、图标字体等单位。静态：开发过程中存在于本地的js/css/图片/图标字体等文件，就是静态的。动态的内容，webpack没办法处理，只能处理静态的。官网：webpack 中文文档 | webpack 中文网。二、Webpack初体验1.初始化项目①...https://blog.csdn.net/qq_34771938/article/details/120535378?spm=1001.2014.3001.5501
Webpack 的 4 个核心概念_小豪boy的博客-CSDN博客一、准备工作1.根据已有的 package.json 文件安装需要的包。2. 打开命令行工具，输入命令 ： npm install3. 安装完成后，项目文件夹中会多出一个 node_modules 文件夹，用于存放安装的包。二、entry官方文档：入口起点(entry points) | webpack 中文网入口起点(entry point)指示 webpack 应该使用哪个模块，来作为打包的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口https://blog.csdn.net/qq_34771938/article/details/120541191?spm=1001.2014.3001.5501

• 安装完成后 package.json 包含以下依赖：

二. 安装 css-loader

• 使用文档：css-loader | webpack 中文网 。
• css-loader 可以让 js 文件通过 import 加载 css 文件。
• 安装命令： npm install --save-dev html-webpack-plugin@4.3.0
• 安装完整后，添加配置规则。

• 运行打包：npm run webpack

• 最后HTML打开后的效果如下：

        注：并没有显示出我们设置的红色背景。

三. 安装 style-loader

• 使用文档：style-loader | webpack 中文网
• style-loader 将模块的导出作为样式添加到 DOM 中，等同于内嵌式（<style></style>）的添加方式。
• 安装命令： npm install --save-dev style-loader@1.2.1
• 安装完成后，添加配置。

• 运行打包：npm run webpack

• 最后HTML打开后的效果如下：

        注：可以成功显示红色背景。

四. 补充外链式的添加方式，需要安装 mini-css-extract-plugin 插件

• 使用文档：mini-css-extract-plugin: Lightweight CSS extraction plugin。
• 将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件。
• 安装命令：npm install --save-dev mini-css-extract-plugin@0.9.0
• 安装完成后，添加配置。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

• 运行打包：npm run webpack

• 最后HTML打开后的效果如下：