为 ExtractTextPlugin 迁移到 webpack 2

Question

我正在尝试基于此 guide 从 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:\temp\node_modules\bootstrap\dist\css\bootstrap.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:\temp\kendo-ui\styles\web\kendo.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:\temp\kendo-ui\styles\web\kendo.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']
  })
},

为 ExtractTextPlugin 迁移到 webpack 2

Migration to webpack 2 for ExtractTextPlugin

webpack

webpack-style-loader

webpack-2

extract-text-plugin

extracttextwebpackplugin