Question

extract-text-webpack-plugin 是一个用于将 Webpack 构建过程中的 CSS 提取到单独文件中的插件。这个插件在 Webpack 2 到 Webpack 4 的版本中非常流行，因为它能够将 CSS 从 JavaScript 打包文件中分离出来，使得样式可以单独缓存，提升页面加载速度。

主要特点

1. CSS 提取 : 将 CSS 从 JavaScript 文件中提取到单独的 .css 文件中。
2. 文件优化 : 可以将 CSS 文件进行压缩和优化，减少文件大小。
3. 缓存优化 : 分离的 CSS 文件能够更好地利用浏览器缓存，提高加载速度。

使用方法（Webpack 4 及以下）

1. 安装插件 :

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

2. 配置 Webpack :

   const ExtractTextPlugin = require('extract-text-webpack-plugin');
   
   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: 'css-loader'
           })
         }
       ]
     },
     plugins: [
       new ExtractTextPlugin('styles.css')
     ]
   };