webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数。如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中。

这种行为在配置webpack时特别有用,尽管它有超出它的用途。无论何时需要合并配置对象,webpack-merge都可以派上用场.

栗子:

 const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})

使用:

vue - webpack.dev.conf.js for merge的更多相关文章

  1. vue - webpack.dev.conf.js

    描述:开发时的配置.(配置开发时的一些操作) 例如这里,是否自动打开浏览器(默认true) 'use strict' // build/util.js const utils = require('. ...

  2. vue - webpack.dev.conf.js for FriendlyErrorsPlugin

    描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin new Friendl ...

  3. vue - webpack.dev.conf.js for HtmlWebpackPlugin

    描述: 这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务. 这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译. 您可 ...

  4. vue - webpack.dev.conf.js for CopyWebpackPlugin

    描述:将单个文件或整个目录复制到构建目录 官网地址:https://www.npmjs.com/package/copy-webpack-plugin // 复制到自定义静态源 new CopyWeb ...

  5. vue - webpack.dev.conf.js for node-portfinder

    描述:获取当前可用的port. (vue-cli配置好了,一旦端口被占用,报错,再次运行时会打开:8080+1,依次类推...8080+n) 官网地址:https://www.npmjs.com/pa ...

  6. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  7. vue -- 脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  8. vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  9. vue-cli脚手架build目录中的webpack.dev.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方 ...

随机推荐

  1. 转:nginx+CGI/FASTCGI

    简介版: 1.fastcgi与cgi区别:fastcgi通过线程来响应请求,而cgi对每个请求生成一个进程. 2.典型nginx数据传输过程:user->nginx->本地socket(请 ...

  2. CodeForces 779E Bitwise Formula

    位运算,枚举. 按按分开计算,枚举$?$是$0$还是$1$,分别计算出$sum$,然后就可以知道该位需要填$1$还是$0$了. #include<map> #include<set& ...

  3. centos7中安装wdcp管理系统(用于网站搭设)

    首先我们进入官网看下安装方法https://www.wdlinux.cn/wdcp/install.html 可以看到,实际上有两张安装方式,一种是源码进行安装,还有一种是RPM包安装,显然第二种安装 ...

  4. 洛谷——P1109 学生分组

    P1109 学生分组 题目描述 有N组学生,给出初始时每组中的学生个数,再给出每组学生人数的上界R和下界L(L<=R),每次你可以在某组中选出一个学生把他安排到另外一组中,问最少要多少次才可以使 ...

  5. Linux命令之find(二)

    接上一篇Linux命令之find(一) (1).实例 1.列出当前目录下及子目录下所有的.txt文件 [xf@xuexi ~]$ ls 1.txt 3.txt b.txt 公共 视频 文档 音乐 2. ...

  6. matlab学习之绘制参数曲线,添加辅助线以及颜色设置

    粘贴代码 % 插入参数曲线h % 插入辅助线h1 % 并设置颜色,包括画布颜色和曲线颜色 t=-pi:0.1:pi; x=cos(t)-sin(3*t); y=sin(t).*cos(t)-cos(3 ...

  7. asp总结

    什么是ASP.NET? ASP.NET是.NET FrameWork的一部分,是一项微软公司的技术,是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术,它可以在通过HTTP请求文档时再在W ...

  8. 实验四实验报告————Android基础开发

    实验四实验报告----Android基础开发 任务一 关于R类 关于apk文件 实验成果 任务二 活动声明周期 实验成果 任务三 关于PendingIntent类 实验成果 任务四 关于布局 实验成果 ...

  9. window安装svn

    window安装svn 1 安装时,安装路径选择好,把打X的都选上,默认第一个 安装完毕后,安装语言包,完毕,电脑上右键打开svn,,svn设置,常规设置,选中文 官网就有的下的 2 创建版本库,检出 ...

  10. 监控RTSP 流

    rtsp://admin:admin12345@192.168.0.100/live1.sdp