Migration auf Webpack 2 für ExtractTextPlugin

Question

Ich versuche, von Webpack 1 zu 2 basierend auf dieser guide zu migrieren. Ich habe die meisten Änderungen vorgenommen, aber mit ExtractTextPlugin zu kämpfen. Dies ist, wie es aussieht, derzeit mit 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]' 
     }, 
    ] 
    } 

Änderungen i mit webpack2 gemacht haben:

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]' 
     }, 
    ] 
    } 

Aber das ist, was zu Fehler. Wo kann ich Hilfe bei der Migration dieses Abschnitts der Webpack-Konfiguration finden?

Einige der Fehler, die ich zu sehen bin:

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

Sie verwenden stylus-loader für Ihre .css auch. Aber nicht jeder CSS ist ein gültiger Stylus. Sie müssen stylus-loader von der .css Regel entfernen:

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