webpack-merge使用说明
webpack-merge
配置分离
随着我们业务逻辑的增多,图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来,进而导致配置文件的增多,使得配置文件书写起来比较繁琐,更严重者(书写特定文件的位置会出现错误)。更由于项目中不同的生产环境和开发环境的配置,使得配置文件变得更加糟糕。
使用单个的配置文件会影响到任务的可重用性,随着项目需求的增长,我们必须要找到更有效地管理配置文件的方法。
管理配置文件的几种方法:
- 在每个环境的多个文件中维护配置,并通过--config参数将webpack指向每个文件,通过模块导入共享配置。
- 将配置文件推送到库,然后引用库。
- 将配置文件推送到工具。
- 维护单个配置文件的所有配置并在那里进行分支并依赖--env参数。
在本文中,主要介绍第四种文件配置的方法。
分离配置文件
我们在根目录下创建config文件夹,并创建四个配置文件:
- webpack.comm.js 公共环境的配置文件
- webpack.development.js 开发环境下的配置文件
- webpack.production.js 生产环境下的配置文件
- webpack.parts.js 各个配置零件的配置文件
合并配置文件的工具
如果配置文件被分成了许多不同的部分,那么必须以某种方式来组合他们,通常就是合并数组和对象,webpack-merge很好的做到了这一点。
webpack-merge做了两件事:它允许连接数组并合并对象,而不是覆盖组合。如下所示:
const merge = require("webpack-merge");
merge(
{a : [1],b:5,c:20},
{a : [2],b:10, d: 421}
)
//合并后的结果
{a : [1,2] ,b :10 , c : 20, d : 421}
那么,如何合并?
1.首先将webpack-merge添加到项目中
npm install webpack-merge --save-dev
2.设置各个配置文件的连接
webpack.config.js
const commConfig = require("./config/webpack.comm");
const developmentConfig = requie("./config/webpack.development");
const productionConfig = require("./config/webpack.development")
const merge = require("webpack-merge");
module.exports = mode => {
if(mode === "production"){
return merge(commConfig,productionConfig,{mode});
}
return merge(commConfig,developmentConfig,{mode});
}
注:上面代码利用mode的值来判断是开发环境还是生产环境
webpack.comm.js
const merge = require("webpack-merge");
const parts = require("./webpack.parts") //引入配置零件文件
const config = {
//书写公共配置
}
module.exports = merge([
config,
parts......
])
webpack.production.js
const merge = require("webpack-merge");
const parts = require("./webpack.parts"); //引入配置零件文件
const config = {
//书写公共配置
}
modules.exports = merge([
config,
parts......
])
webpack.development.js
const merge = require("webpack-merge");
const parts = require("./webpack.parts"); //引入配置零件文件
const config = {
//书写公共配置
}
modules.exports = merge([
config,
parts......
])
--env值传参
"dev": "webpack --env development ",
"prod": "webpack --env production",
"dev:server": "webpack-dev-server --env development "
使用--env允许将字符串传递给配置。我们来修改下package.json,使得env参数mode环境参数传入到webpack.config.js中,就可以判断是生产环境还是开发环境。
如何写出可配置的webpack.parts.js
上面可以看出我们新建了一个webpack.parts.js文件,这个文件中主要是存放我们的一些配置零件。如何写出可配置,可拔插的配置零件。就是我们这个文件的最重要的部分。
以loadCSS为例:
exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => ({
module : {
rules:[{
test : reg,
include,
exclude,
use[{
loader : "style-loader",
},{
loader : "css-loader",
}].concat(uses),
}]
}
})
上面代码中,利用exports导出单个配置零件,通过解构赋值来传入参数。使用数组的concat来连接外部导入的loader。参数解析:
reg:表示loader匹配的test正则,默认为css,这里可以是(less、sass、stylus)。
include:表示所要打包的文件夹。
exclude:表示要跳过打包的文件夹。
uses:外部导入的loader。
在webpack.development.js中引入
module.exports = merge([
config,
parts.loadCSS({
reg : /\.less/,
use : ["less-loader"]
}),
parts.loadCSS(),
])
总结:配置文件拆分可以是我们继续扩展配置。最重要的收益是我们可以提取不同目标之间的共性。并且还可以识别要组合的较小配置部件,这些配置不见可以推送到自己的软件包以跨项目使用。还可以将配置作为依赖项进行管理,而不是在多个项目中复制类似的配置。
欢迎关注公众号,进一步技术交流:
webpack-merge使用说明的更多相关文章
- webpack使用的补充
1.分离生产环境和开发环境的wepack.config.js 我们可以将生产环境和开发环境中的配置分离为两个不同的文件,并且还维护一个共同的配置文件 common,可以通过 webpack.merge ...
- 基于webpack5封装的cli工具packx
安装 用 npm / yarn 安装: $ npm install -D packx $ yarn add -D packx 特性 基于 webpack5 支持 less,sass 支持 spa/mp ...
- vue - webpack.dev.conf.js for merge
webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数.如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中. 这种行为在配置webpack时特别有 ...
- DataTable的Merge\COPY\AcceptChange使用说明
在C#内使用DataTable的Merge().Copy().AcceptChange().Clone()方法的用途如下: 1.Merge()可将两个不同的表结构的表进行合并,合并后新表的列为之前两表 ...
- 五. Webpack详解
1. 什么是Webpack 1.1 引入 什么是webpack?这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释:At its core, webpack is a static ...
- Merge的用法
merge的使用说明: merge [into] [目标表] using <源表> on 条件 when matched 操作 when not matched 操作; 首先,请参看两张表 ...
- SQL2008中Merge的用法
在SQL2008中,新增了一个关键字:Merge,这个和Oracle的Merge的用法差不多,只是新增了一个delete方法而已.下面就是具体的使用说明: 首先是对merge的使用说明: merge ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- TortoiseSVN客户端使用说明
TortoiseSVN客户端使用说明 TortoiseSVN不是一个独立的窗口程序,而是集成在windows右键菜单中,下面对TortoiseSVN的菜单项做简要的说明.01.SVN Checkout ...
- 使用webpack打包ThinkPHP的资源文件
使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...
随机推荐
- nlp-roadmap
nlp-roadmap https://github.com/graykode/nlp-roadmap nlp-roadmap is Natural Language Processing ROADM ...
- Linux系统中五款好用的日志分析工具
监控网络活动是一项繁琐的工作,但有充分的理由这样做.例如,它允许你查找和调查工作站和连接到网络的设备及服务器上的可疑登录,同时确定管理员滥用了什么.你还可以跟踪软件安装和数据传输,以实时识别潜在问题, ...
- centos安装docker以及docker-compose
1.yum更新 # sudo yum update 2.如果安装docker旧版本,旧版本的卸载 # sudo yum remove docker docker-common docker-selin ...
- React Native 开发豆瓣评分(八)首页开发
首页完成效果展示: 一.开发占位图组件 在没有数据的时候使用占位图替代 items 的位置. 在 components 目录里创建 moviesItemPlaceholder.js import Re ...
- Python 实现自动导入缺失的库
原文:由浅入深:Python 中如何实现自动导入缺失的库? 作者:豌豆花下猫 在写 Python 项目的时候,我们可能经常会遇到导入模块失败的错误:ImportError: No module nam ...
- QTableWidget数据表格
void setRowHeight(int row, int height); //行高 void setVerticalHeaderLabels(const QStringList &lab ...
- 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写
说明 结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...
- gitignore文件不生效
git rm -r --cached . git add . git commit -m 'update .gitignore'
- python之PEP8规范
比较需要注意的 缩进 每一级缩进使用4个空格. 续行应该与其包裹元素对齐,要么使用圆括号.方括号和花括号内的隐式行连接来垂直对齐,要么使用挂行缩进对齐3.当使用挂行缩进时,应该考虑到第一行不应该有参数 ...
- 更改jupyter-notebook启动时的默认目录
1.找到jupyter_notebook_config.py: 默认Windows: C:\Users\USERNAME\.jupyter\jupyter_notebook_config.py 2.找 ...