CODEWITHSUNDEEP
webpackvue.jswebpack-2vue-loader
Modelesq
Modelesq

Reputation: 5382

Bridging the gap with webpack2 and webpack.LoaderOptionsPlugin

I'm a webpack noob. It looks like vue-loader hasn't been updated with webpack 2. Webpack has an example helper of sorts (LoaderOptionsPlugin), but I can't get it to work at all. This is what is being thrown:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'rules'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           rules: ...
         }
       })
     ]

My config:

module.exports = {
    entry: './src/main.js',
    path: path.resolve(__dirname, 'dist'),
    rules: [
      {test: /\.vue$/, use: 'vue-loader'},
    ],
    plugins: [
       new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false,
            options: {
                context: __dirname
            }
        })
    ]
}

I don't want to downgrade webpack just to make this work. What do I place within options? I haven't found any examples... Any help would be awesome. Thank you!

Upvotes: 0

Views: 291

Answers (1)

Vincent T
Vincent T

Reputation: 3262

The rules option does not exist I think you might be mistaken with the V1 version, the correct configuration should be something like below.

module.exports = {
    entry: './src/main.js',
    output: './build/main.js'
    module: {
       loaders: [{
           test: /\.vue$/,
           loader: 'vue-loader'

        }]
    },
    resolve: {
      alias: {
          'vue$': 'vue/dist/vue.esm.js'
    }

}

Upvotes: 1

Related Questions