webpack ExtractTextWebpackPlugin

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

安装

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

npm install extract-text-webpack-plugin --save-dev

或者

yarn add extract-text-webpack-plugin --dev

使用方法

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

// www.javascriptcn.com code example
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

在上面的配置中，我们首先引入 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 文件大小。在实际项目中，可以根据具体需求对插件进行配置，以达到最佳效果。