ExtractTextPlugin 在 Webpack 3 中无法正常工作求助

嘿，我来帮你捋捋Webpack 3里ExtractTextPlugin不能正常工作的问题，结合你贴的配置，先列几个最容易踩的坑，你可以挨个排查：

1. 忘记实例化 ExtractTextPlugin 插件 #

这绝对是最常见的疏漏！ 你只在配置顶部引入了插件，但Webpack不会自动启用它，必须在plugins数组里显式声明实例：

// 在配置对象里添加plugins字段
plugins: [
  new ExtractTextPlugin('styles.css'), // 这里指定提取后生成的css文件名，可自定义
]

2. Output 配置不完整 #

你的output部分被截断了，缺失的publicPath会导致提取后的css文件路径错误，页面根本加载不到。补全这部分配置：

output: {
  path: __dirname + '/dist',
  publicPath: '/', // 按你的部署需求调整，比如部署在dist目录下就设为'/dist/'
  filename: 'bundle.js' // 别忘了指定打包后的js文件名
}

3. 依赖版本不兼容 #

Webpack 3 对 ExtractTextPlugin 的版本有要求，必须用^3.0.2这个版本，太高或太低都会出现兼容性问题。你可以检查下package.json里的版本，或者直接重新安装适配版本：

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

4. 开发环境热重载的冲突 #

你的entry里加了react-hot-loader/patch，说明是在开发环境用热重载，但ExtractTextPlugin在热重载场景下本来就不太适配——它更适合生产环境分离css文件。如果是开发环境，其实可以直接用style-loader注入样式，不用ExtractTextPlugin；生产环境再切换成插件提取。

5. 文件匹配规则的小问题 #

你的规则是test: /\.(s*)css$/，这个能匹配.css和.scss/.sass文件，但要确认你项目里的样式文件后缀没有拼写错误，比如写成.sass却写成.sccs这种低级错误。

最后，贴个补全后的完整配置给你参考：

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './src/index.js',
    'react-hot-loader/patch',
  ],
  module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
        })
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

优先检查前两个点（插件实例化和output配置），大部分情况下都是这两个原因导致的插件失效。

内容的提问来源于stack exchange，提问作者darKnight