Migration to webpack 2 for ExtractTextPlugin

Question

我正在尝试根据本指南从 webpack 1 迁移到 2。我已经进行了大部分更改，但与ExtractTextPlugin作斗争。这是它目前在 webpack 1 中的样子：

 module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /(node_modules|vendor)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'autoprefixer-loader')
      },
      {
        test: /.styl$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer-loader!stylus-loader')
      },
      {
        test: /.(woff|woff2|ttf|eot)($|?)/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
      {
        test: /.svg?/,
        loader: 'url-loader?limit=100000&name=[path][name].[ext]'
      },
      {
        test: /.(png|gif|jpg|svg)$/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
    ]
  }

我对 webpack2 所做的更改：

module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /(node_modules|vendor)/,
        use:[{
            loader: 'babel-loader',
            query: { //
              presets: ['es2015', 'stage-0', 'react']
            }
          }
        ]
      },

      {
    test: /.css$/,
    use: ExtractTextPlugin.extract({
      fallback:'style-loader',
      use: ['css-loader', 'postcss-loader','stylus-loader']
    })
  },
  {
    test: /.styl$/,
    use: ExtractTextPlugin.extract({
      fallback:'style-loader',
        use: ['css-loader', 'postcss-loader','stylus-loader']
    })
  },

      {
        test: /.(woff|woff2|ttf|eot)($|?)/,
        use: 'file-loader?name=[path][name].[ext]'
      },
      {
        test: /.svg?/,
        use: 'url-loader?limit=100000&name=[path][name].[ext]'
      },
      {
        test: /.(png|gif|jpg|svg)$/,
        use: 'file-loader?name=[path][name].[ext]'
      },
    ]
  }

但这会导致错误。在哪里可以找到有关迁移 webpack 配置的此部分的帮助。

我看到的一些错误：

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./~/bootstrap/dist/css/bootstrap.css
Module build failed: ParseError: C:tempnode_modulesbootstrapdistcssbootstrap.css:3586:71
   3582|   text-decoration: none;
   3583|   cursor: not-allowed;
   3584|   background-color: transparent;
   3585|   background-image: none;
   3586|   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-------------------------------------------------------------------------------^
   3587| }
   3588| .open > .dropdown-menu {
   3589|   display: block;
expected "indent", got ";"

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./vendor/kendo-ui/styles/web/kendo.default.css
Module build failed: TypeError: C:tempkendo-uistyleswebkendo.default.css:862:27
   858| .k-state-disabled {
   859|   opacity: .7;
   860| }
   861| .k-ie8 .k-state-disabled {
   862|   filter: alpha(opacity=70);
----------------------------------^
   863| }
   864| .k-tile-empty.k-state-selected,
   865| .k-loading-mask.k-state-selected {
Cannot read property 'a' of undefined
    at ".k-ie8 .k-state-disabled " (C:tempkendo-uistyleswebkendo.default.css:861:2)

Answer 1

你也在.css中使用stylus-loader。但并非所有CSS都是有效的手写笔。您需要从.css规则中删除stylus-loader：

{
  test: /.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader']
  })
},