webpack-merge提供了一個merge連接數組並合並創建新對象的對象的函數。如果遇到函數，它將執行它們，通過算法運行結果，然後再次將返回的值包裝在函數中。

這種行為在配置webpack時特別有用，盡管它有超出它的用途。無論何時需要合並配置對象，webpack-merge都可以派上用場.

栗子:

 1 const devWebpackConfig = merge(baseWebpackConfig, {
 2   module: {
 3     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true
 
 })
 4   },
 5   // cheap-module-eval-source-map is faster for development
 6   devtool: config.dev.devtool,
 7 
 8   // these devServer options should be customized in /config/index.js
 9   devServer: {
10     clientLogLevel: ‘warning‘,
11     historyApiFallback: {
12       rewrites: [
13         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘index.html‘) },
 
14       ],
15     },
16     hot: true,
17     contentBase: false, // since we use CopyWebpackPlugin.
18     compress: true,
19     host: HOST || config.dev.host,
20     port: PORT || config.dev.port,
21     open: config.dev.autoOpenBrowser,
22     overlay: config.dev.errorOverlay
23       ? { warnings: false
 
, errors: true }
24       : false,
25     publicPath: config.dev.assetsPublicPath,
26     proxy: config.dev.proxyTable,
27     quiet: true, // necessary for FriendlyErrorsPlugin
28     watchOptions: {
29       poll: config.dev.poll,
30     }
31   },
32   plugins: [
33     new webpack.DefinePlugin({
34       ‘process.env‘: require(‘../config/dev.env‘)
35     }),
36     new webpack.HotModuleReplacementPlugin(),
37     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
38     new webpack.NoEmitOnErrorsPlugin(),
39     // https://github.com/ampedandwired/html-webpack-plugin
40     new HtmlWebpackPlugin({
41       filename: ‘index.html‘,
42       template: ‘index.html‘,
43       inject: true
44     }),
45     // copy custom static assets
46     new CopyWebpackPlugin([
47       {
48         from: path.resolve(__dirname, ‘../static‘),
49         to: config.dev.assetsSubDirectory,
50         ignore: [‘.*‘]
51       }
52     ])
53   ]
54 })

使用：

vue - webpack.dev.conf.js for merge