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.errorOverlay23 ??????? { warnings: false, errors: true }24 ??????: false,25 ????publicPath: config.dev.assetsPublicPath,26 ????proxy: config.dev.proxyTable,27 ????quiet: true, // necessary for FriendlyErrorsPlugin28 ????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-plugin40 ????new HtmlWebpackPlugin({41 ??????filename: ‘index.html‘,42 ??????template: ‘index.html‘,43 ??????inject: true44 ????}),45 ????// copy custom static assets46 ????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
原文地址:https://www.cnblogs.com/cisum/p/9609780.html