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 })
使用:
原文地址:https://www.cnblogs.com/cisum/p/9609780.html
时间: 2024-10-01 00:29:13