webpack4 中使用 MiniCssExtractPlugin 提取 CSS 文件-JavaScript中文网-JavaScript教程资源分享门户

webpack4 中使用 MiniCssExtractPlugin 提取 CSS 文件

前言

在前端开发中，CSS 是不可或缺的一部分，但是在项目中，CSS 文件往往会变得非常庞大，这不仅会影响页面加载速度，还会影响开发效率。为了解决这个问题，我们可以使用 webpack 中的 MiniCssExtractPlugin 插件来提取 CSS 文件，减少打包后的体积。

本文将介绍如何使用 webpack4 中的 MiniCssExtractPlugin 插件来提取 CSS 文件，并提供示例代码。

MiniCssExtractPlugin 简介

MiniCssExtractPlugin 是 webpack 中一个用于将 CSS 文件提取为独立文件的插件。与之前使用的 style-loader 不同，MiniCssExtractPlugin 可以将 CSS 文件从 JavaScript 文件中分离出来，减少文件体积，提高页面加载速度。

安装 MiniCssExtractPlugin

在使用 MiniCssExtractPlugin 之前，需要先安装该插件。可以通过 npm 安装，命令如下：

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

配置 webpack.config.js

在 webpack.config.js 中，需要添加 MiniCssExtractPlugin 的配置项，示例代码如下：

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

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

其中，filename 和 chunkFilename 分别指定输出的 CSS 文件名和 chunk 文件名。

示例代码

下面是一个简单的示例代码，用于提取项目中的 CSS 文件。

index.js

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

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

style.css

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

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

webpack.config.js

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

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

package.json

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

在终端中执行以下命令，即可将项目中的 CSS 文件提取出来：

--- --- -----

总结

使用 MiniCssExtractPlugin 插件可以有效地将 CSS 文件从 JavaScript 文件中提取出来，减少打包后的体积，提高页面加载速度。本文介绍了如何在 webpack4 中使用 MiniCssExtractPlugin 插件来提取 CSS 文件，并提供了示例代码。希望本文能够对大家在前端开发中使用 webpack 有所帮助。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/65c436b0add4f0e0ffeab75a