关于webpack 使用vue的问题

Question

下面是我的配置文件

  babel: {
    babelrc: false,
    presets: [
      ['es2015', {modules: false}],
      'stage-1'
    ],
    plugins: [
      'transform-vue-jsx'
    ]
  },
  postcss: [
    require('autoprefixer')({
      // Vue does not support ie 8 and below
      browsers: ['last 2 versions', 'ie > 8']
    }),
    require('postcss-nested')
  ],
  cssModules: true,
}

下面是报错信息：
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration has an unknown property 'vue'. These properties are valid:
  object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, 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: {
       vue: ...
     }
   })
 ]
 

Answer 1

You are correct in that the issue is that you cannot have custom properties on the configuration. However LoaderOptionsPlugin was part of a migration for loader authors who were not able to migrate to using the options:{} property in their loader config.

In fact, if you check out the chinese vue-loader docs you can see that to pass options now, you can use the options property on the loader object for vue-loader.

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
    }
  }
}