ExtractTextPlugin 용 webpack 2로 마이그레이션

Question

guide을 기반으로 webpack 1에서 2로 마이그레이션하려고합니다. 나는 ExtractTextPlugin을 사용하여 대부분의 변경을했지만 어려움을 겪었다. 내가 webpack2과 맺은

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

변경 : 이것은 현재 웹팩 1 모습입니다

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 config의이 섹션을 마이그레이션하는 데 도움을 얻을 수있는 곳은 어디입니까?

내가보고하고있는 오류 중 일부

:

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