webpack ExtractTextWebpackPlugin

Webpack 插件 ExtractTextWebpackPlugin

ExtractTextWebpackPlugin 是一个 webpack 插件，用于将 CSS 从 JavaScript bundle 中提取出来，单独生成一个 CSS 文件。这样可以避免将 CSS 样式直接嵌入到 JavaScript bundle 中，减少了 JavaScript 文件的大小，提高了页面加载速度。

安装

首先，需要安装 ExtractTextWebpackPlugin 插件。可以通过 npm 或者 yarn 进行安装：

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

或者

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

使用方法

在 webpack 的配置文件中引入 ExtractTextWebpackPlugin，并在 plugins 中实例化该插件。以下是一个简单的示例：

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

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

在上面的配置中，我们首先引入 ExtractTextPlugin，并在 module.rules 中配置对 CSS 文件的处理规则。在 plugins 中实例化 ExtractTextPlugin，并指定提取出的 CSS 文件名为 styles.css。

配置选项

ExtractTextWebpackPlugin 还支持一些配置选项，可以根据实际需求进行设置。以下是一些常用的配置选项：

filename: 指定提取出的 CSS 文件名，默认为 'styles.css'。
disable: 用于控制是否禁用插件，在开发环境中可能会用到。
allChunks: 是否提取所有 chunk 中的 CSS，如果为 false，则只提取初始化的 chunk 中的 CSS。

更多配置选项可以查阅官方文档。

总结

通过使用 ExtractTextWebpackPlugin 插件，我们可以将 CSS 从 JavaScript bundle 中提取出来，单独生成一个 CSS 文件，提高页面加载速度，减少 JavaScript 文件大小。在实际项目中，可以根据具体需求对插件进行配置，以达到最佳效果。