使用兩種配置創建一個webpack.config，但使用相同的插件

Question

我正在開發基於vue.js的項目，我將在其中爲管理控制面板提供一個SPA，並在公共方面提供另一個SPA。我想單獨處理這些項目，但是要在同一時間構建它們。 （或者它會很高興有這樣的事情：運行構建 - 公共或--admin（指定要建立哪一個））

我創建了一個配置數組，並使用此設置創建輸出，但對於一些它不會縮小的原因。它有一個單一的配置。

我試圖把插件像插件分開配置：[..]但沒有成功。

webpack.config.js：

變種路徑=要求（ '路徑'） VAR的WebPack =要求（ '的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是CONFIGS的陣列。設置陣列上的任何屬性都不會做任何事情，因爲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() 
    ]) 
    } 
}