从Webpack v1迁移到v2

Question

I'm trying to migrate my code from webpack v1 to v2 and add in the sass-loader, however I get the error

throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);

I'm very confused as to what the final file is supposed to look like:

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
         }
   })
  ]
};

At the moment the code is a mix of the two versions. I am using webpack version 2.2.1. Thanks.

Answer 1

There are several things you need to change:

Your test: /\\.js?$/ and the corresponding loader and exclude should be another object inside the rules array:

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 does not exist, it is just resolve.enforceExtension directly:

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

And finally, although it's not an error but just a warning, new webpack.NoErrorsPlugin() is deprecated and has been replaced with:

new webpack.NoEmitOnErrorsPlugin()

Also if you haven't yet, you should have a look at the migration guide from the official docs https://webpack.js.org/guides/migrating/ .