弥补与webpack2和webpack.LoaderOptionsPlugin的差距

时间:2017-05-28 22:21:41

标签: webpack vue.js webpack-2 vue-loader

我是一个webpack noob。看起来vue-loader尚未使用webpack 2进行更新.Webpack有一个示例帮助程序(LoaderOptionsPlugin),但我根本无法使用它。这就是抛出的东西:

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: ...
         }
       })
     ]

我的配置:

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

我不想降级webpack只是为了让这项工作成功。我在选项中放置了什么?我没有找到任何例子......任何帮助都会很棒。谢谢!

1 个答案:

答案 0 :(得分:1)

规则选项不存在我认为您可能会错误地使用V1版本,正确的配置应该如下所示。

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

}