用 webpack2 和 webpack.LoaderOptionsPlugin 弥合差距

Question

我是一个 webpack 菜鸟。看起来 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。我在选项中放置什么？我还没有找到任何例子......任何帮助都会很棒。谢谢！

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

}

用 webpack2 和 webpack.LoaderOptionsPlugin 弥合差距

Bridging the gap with webpack2 and webpack.LoaderOptionsPlugin

webpack

vue.js

webpack-2

vue-loader