Webpack 中文文档 目录

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 文件大小。在实际项目中,可以根据具体需求对插件进行配置,以达到最佳效果。


上一篇:webpack 插件 EvalSourceMapDevToolPlugin
下一篇:webpack 插件 HashedModuleIdsPlugin
纠错
反馈