ExtractTextPlugin 不再适用于 Webpack 2.2

Question

当我想通过webpack -p --progress --hide-modules 构建我的前端时，我收到以下错误：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]
   Details:
    * configuration.module.rules[1].use should be a string.
    * configuration.module.rules[1].use should be an instance of function.
    * configuration.module.rules[1].use should be an object.
    * configuration.module.rules[1].use should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[1].use should be an instance of function.
    * configuration.module.rules[1].use[1] should be a string.
    * configuration.module.rules[1].use[1] should be an instance of function.
    * configuration.module.rules[1].use[1] has an unknown property 'fallback'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[1].use[1] has an unknown property 'use'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[1].use[1] should be one of these:
      non-empty string | function | object { loader?, options?, query? }
error Command failed with exit code 1.

我没有碰任何我的 webpack 配置文件。我正在使用这个包版本：

"babel-loader": "^6.2.10",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "beta",
"file-loader": "^0.9.0",
"jest": "^16.0.1",
"node-sass": "^4.3.0",
"resolve-url-loader": "^1.6.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-manifest-plugin": "^1.1.0"

这个配置在我的webpack.config.js:

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

module.exports = {
  context: path.resolve(__dirname, './resources/assets'),
  entry: {
    index: './src/index.js',
    kpi: ['whatwg-fetch', './js/kpi/index.js'],
    quiz: './js/quiz/index.js',
  },
  output: {
    path: path.resolve(__dirname, './public/js'),
    publicPath: '/js/',
    filename: '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'resolve-url-loader',
            'sass-loader?sourceMap',
          ],
          options: {
            publicPath: '/css/',
          },
        }),
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          publicPath: '/img/',
          name: '../img/[name].[ext]',
        },
      },
      {
        test: /\.(woff2?|ttf|eot|svg)$/,
        loader: 'file-loader',
        options: {
          publicPath: '/fonts/',
          name: '../fonts/[name].[ext]',
        },
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({ filename: '../css/[name].[contenthash].css' }),
    new ManifestPlugin({ fileName: '../manifest.json' }),
  ],
};

我正在运行节点版本 7.6，但也尝试了 7.3，但没有成功。似乎使用 ExtractWebpackPlugin 作为正确的加载器并没有被注意到。你知道这个问题的任何解决方案吗？已经尝试过不同的包版本组合。

Answer 1

ExtractTextPlugin.extract 接受具有以下属性的对象：

• use
• fallback
• publicPath

但是你给它一个options 属性，这似乎弄乱了生成的加载器。您需要将 .scss 规则更改为：

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'resolve-url-loader',
      'sass-loader?sourceMap',
    ],
    publicPath: '/css/'
  }),
},