使用 Webpack 4 提取 CSS 等样式文件

Webpack 是一个现代化的模块打包工具，能够将多个 JavaScript 文件及其依赖项打包为一个或多个静态资源。除了 JavaScript 文件外，Webpack 还支持提取和处理其他类型的资源，例如 CSS、图片等。

在 Webpack 中，提取 CSS 样式文件可以通过以下两种方式实现：

使用 extract-text-webpack-plugin 插件
使用 mini-css-extract-plugin 插件（Webpack 4 推荐使用）

使用 `mini-css-extract-plugin` 提取 CSS 样式文件

mini-css-extract-plugin 是一个轻量级的插件，能够将 CSS 样式代码从打包后的 JavaScript 文件中提取出来，生成独立的 CSS 文件。相比于 extract-text-webpack-plugin，mini-css-extract-plugin 更加稳定，且不会引起一些奇怪的问题。

下面是如何在 Webpack 中使用 mini-css-extract-plugin 提取 CSS 样式文件的步骤：

步骤一：安装插件

--- ------- ----------------------- ----------

步骤二：配置 Webpack

----- -------------------- - -----------------------------------

-------------- - -
  -- ---
  ------- -
    ------ -
      -
        ----- ---------
        ---- -
          ----------------------------
          -------------
        --
      --
    --
  --
  -------- -
    --- ----------------------
      --------- -------------
    ---
  --
--

在 Webpack 配置文件中，我们需要引入 mini-css-extract-plugin 插件，并将其作为 plugins 数组的一个元素。同时，在 module.rules 数组中增加一个针对 CSS 文件的配置，使用 MiniCssExtractPlugin.loader 作为样式处理器。

步骤三：编写 CSS 样式代码

-- ------- --
---- -
  ----------------- --------
-

-- -
  ------ ----
-

步骤四：使用 CSS 样式代码

------ ------------

-- ---

在 JavaScript 中，通过 import 引入 CSS 样式文件。

步骤五：打包并生成独立的 CSS 文件

------- ------ ----------

执行以上命令后，Webpack 将会将 CSS 样式代码提取出来，生成一个名为 main.css 的文件。

总结

通过 mini-css-extract-plugin 插件，我们可以轻松地将 CSS 样式代码从 JavaScript 文件中提取出来，使得项目更容易维护、优化和扩展。同时，也能够避免一些潜在的问题，例如 FOUC（Flash of Unstyled Content）等。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/29426

webpack 4 提取 CSS 等样式文件