從V1的WebPack移動到V2

Question

我想從第一版的WebPack我的代碼遷移到v2和添加在SASS裝載機，但我得到的錯誤

throw new WebpackOptionsValidationError(webpackOptionsValidationErrors); 

我以很迷茫什麼最終的文件應該是這樣的：

let webpack = require('webpack'); 
let path = require('path'); 


module.exports = { 
    devtool: 'eval-source-map', 
    entry: [ 
    './src/index' 
    ], 
    module: { 

    rules: [ 
     { 
      test: /\.scss$/, 
      use: [ 
       "style-loader", // creates style nodes from JS strings 
       "css-loader", // translates CSS into CommonJS 
       "sass-loader" // compiles Sass to CSS 
      ] 
     }], 

     test: /\.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 


}, 

    resolve: { 
    extensions: ['.js'], 
     options: { 
      enforceExtension: false 
     } 
    }, 

    output: { 
    path: path.join(__dirname, '/dist'), 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 

    devServer: { 
    contentBase: './dist', 
    hot: true, 
     historyApiFallback: true 
    }, 

    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
     new webpack.LoaderOptionsPlugin({ 
      debug: true, 
       options: { 
      context: __dirname 
     } 
    }) 
    ] 
}; 

此刻代碼是兩個版本的混合。我正在使用webpack版本2.2.1。謝謝。

Answer 1

有您需要更改幾件事情：

你test: /\.js?$/和相應的loader和exclude應該是rules數組內的另一個對象：

module: { 
    rules: [ 
    { 
     test: /\.scss$/, 
     use: [ 
     "style-loader", // creates style nodes from JS strings 
     "css-loader", // translates CSS into CommonJS 
     "sass-loader" // compiles Sass to CSS 
     ] 
    }, 
    { 
     test: /\.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
    } 
    ] 
}, 

resolve.options不存在，它只是resolve.enforceExtension直接：

resolve: { 
    extensions: ['.js'], 
    enforceExtension: false 
}, 

和最後，雖然這不是一個錯誤，但只是一個警告，new webpack.NoErrorsPlugin()已被棄用，並已替換爲：

new webpack.NoEmitOnErrorsPlugin() 

此外，如果你還沒有，你應該看看從官方文檔https://webpack.js.org/guides/migrating/遷移指南。