创建具有两个配置但具有相同插件的WebPack.config

Question

我正在从事一个基于vue.js的项目，在该项目中，我将在公共方面为Admin仪表板和另一个水疗中心提供水疗中心。我想分别处理项目，但同时构建它们。（或者有类似的东西：运行构建 - public或-admin（指定要构建哪个）会很不错）

）

我创建了一个配置数组，并且使用此设置会创建输出，但由于某种原因，它不会减小。用单个配置做到了。

我试图将插件分别像插件一样分别放置到配置：[..]但没有成功。

webpack.config.js：

var Path = require（'Path'）var webpack = require（'webpack'）

module.exports = [
    {
        entry: {
            public : './resources/js/public-spa/main.js',
        },
        output: {
            path: path.resolve(__dirname, './public/public-spa/dist/'),
            filename: '[name].build.js',
            chunkFilename: "public.[name].chunk.js"
        },
        module: {
            rules: [
                {
                    test: /.vue$/,
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            'scss': 'vue-style-loader!css-loader!sass-loader',
                            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                        }
                    }
                },
                {
                    test: /.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /.(png|jpg|gif|svg)$/,
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]?[hash]'
                    }
                }
            ]
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        devServer: {
            historyApiFallback: true,
            noInfo: true
        },
        performance: {
            hints: false
        },
        devtool: '#eval-source-map'
    },
    {
        entry: {
            public : './resources/js/admin-spa/main.js',
        },
        output: {
            path: path.resolve(__dirname, './public/admin-spa/dist/'),
            filename: '[name].build.js',
            chunkFilename: "admin.[name].chunk.js"
        },
        module: {
            rules: [
                {
                    test: /.vue$/,
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            'scss': 'vue-style-loader!css-loader!sass-loader',
                            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                        }
                    }
                },
                {
                    test: /.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /.(png|jpg|gif|svg)$/,
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]?[hash]'
                    }
                }
            ]
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        devServer: {
            historyApiFallback: true,
            noInfo: true
        },
        performance: {
            hints: false
        },
        devtool: '#eval-source-map'
    }
];
if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: false,
        compress: {
            warnings: false,
        },
        output: {
            comments: false,
        },
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ])
}

Answer 1

您的module.exports是配置的数组。设置数组上的任何属性都没有任何操作，因为WebPack将接收每个单独的配置，并且不会在数组上寻找任何属性。

您需要循环浏览配置并更改每个配置。

if (process.env.NODE_ENV === 'production') {
  for (const config of module.exports) {
    config.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    config.plugins = (config.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: false,
        compress: {
          warnings: false,
        },
        output: {
          comments: false,
        },
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      }),
      new webpack.optimize.AggressiveMergingPlugin()
    ])
  }
}