创建具有两种配置但具有相同插件的 webpack.config

Question

我正在开发一个基于 vue.js 的项目，其中我将有一个 SPA 用于管理仪表板，另一个 SPA 位于 public 端。我想单独处理项目，但同时构建它们。（或者最好有类似的东西：运行 build --public OR --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()
    ])
  }
}

创建具有两种配置但具有相同插件的 webpack.config

Creating a webpack.config with two configurations but with the same plugins

node.js

npm

webpack

vue.js

webpack-2