一次Webpack配置文件的分离实战记录


Posted in Javascript onNovember 30, 2018

前言

随着前端技术的发展,业务逻辑的增多及功能化的繁琐已经成为前端人员最烧脑的问题。前端自动化构建工具的出现,为前端人员带来了项目构建上的福音,成为每个前端工程师必回的技术栈,目前比较流行的Webpack以万物皆模块的思想构建我们的前端项目,同样也是笔者正在使用的一个前端自动化构建工具。

Webpack对于每个前端人员来说都不会怎么陌生,它将每一个静态文件当做一个模块,经过一系列的处理为我们整合出最后的需要的js、css、图片、字体等文件。

webpack.config.js就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。

下面话不多说了,来一起看看详细的介绍吧

单个配置文件所造成的问题

本文默认电脑前的你已经了解一些Webpack基础的配置,并懂得了webpack.config.js配置文件的基础搭建。

随着我们业务逻辑的增多,图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来,进而导致配置文件的增多,使得配置文件书写起来比较繁琐,更严重者(书写特定文件的位置会出现错误)。更由于项目中不同的生产环境和开发环境的配置,使得配置文件变得更加糟糕。

使用单个的配置文件会影响到任务的可重用性,随着项目需求的增长,我们必须要找到更有效地管理配置文件的方法。

管理配置文件的几种方法

配置文件的管理有一下几种方法。

  • 在每个环境的多个文件中维护配置,并通过--config参数将webpack指向每个文件,通过模块导入共享配置。
  • 将配置文件推送到库,然后引用库。
  • 将配置文件推送到工具。
  • 维护单个配置文件的所有配置并在那里进行分支并依赖--env参数。

本文以第四种方式阐述webpack配置文件的分离。

分离配置文件

我们在根目录下创建config文件夹,并创建四个配置文件,分别是:

  • webpack.comm.js   公共环境的配置文件
  • webpack.development.js    开发环境下的配置文件
  • webpack.production.js     生产环境下的配置文件
  • webpack.parts.js      各个配置零件的配置文件

一次Webpack配置文件的分离实战记录

合并配置文件的工具

如果配置文件被分成了许多不同的部分,那么必须以某种方式来组合他们,通常就是合并数组和对象,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}

使用webpack-merge合并配置文件

首先将webpack-merge添加到项目中

npm install webpack-merge --save-dev

首先设置各个配置文件的连接

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值传参

使用--env允许将字符串传递给配置。我们来修改下package.json

"dev": "webpack --env development ",
 "prod": "webpack --env production",
 "dev:server": "webpack-dev-server --env development "

这样就使得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(),
])

分离配置文件的好处

配置文件拆分可以是我们继续扩展配置。最重要的收益是我们可以提取不同目标之间的共性。并且还可以识别要组合的较小配置部件,这些配置不见可以推送到自己的软件包以跨项目使用。还可以将配置作为依赖项进行管理,而不是在多个项目中复制类似的配置。

我自己的parts配置

展示一部分我自己的部件配置,由于在学习阶段,不足的地方还望大佬们提出,学习进步。

/**
 * @name 本地服务器配置
 * @param host 打开的url
 * @param port 打开url的端口号
 * 
 */
exports.devServer = ({ host, port} = {}) => ({
 devServer : {
  stats : "errors-only",
  host,
  port,
  open : true,
  overlay : true,
 }
})
/**
 * @name 未从js中分离的cssLoader配置
 * @param reg 匹配文件的后缀名test
 * @param include 所要打包的文件夹
 * @param exclude 跳过打包的文件夹
 * @param uses 所要向loadCSS中添加的loader
 */
exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => {
 return {
  module: {
   rules: [{
    test: reg,
    use: [{
     loader: "style-loader"
    }, {
     loader: "css-loader"
    }].concat(uses),
    include,
    exclude,
   }]
  },
 }
}
/**
 * @name 从js中分离的cssLoader配置
 * @param reg 匹配文件的后缀名test
 * @param include 所要打包的文件夹
 * @param exclude 跳过打包的文件夹
 * @param uses 所要向loadCSS中添加的loader
 * */
const MiniCssExtrectPlugin = require("mini-css-extract-plugin");
exports.extractCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => {
 const plugin = new MiniCssExtrectPlugin({
  filename : "styles/[name]-[hash:5].css",
 })
 return {
  module: {
   rules: [{
    test: reg,
    use: [{
     loader: MiniCssExtrectPlugin.loader,
     options : {
      publicPath : "../"
     }
    }, {
     loader: "css-loader"
    }].concat(uses),
    include,
    exclude,
   }]
  },
  plugins : [
   plugin,
  ]
 }
}
/**
 * @name css tree-shaking:将没有用到的css扔掉
 * @param paths 监听css tree-shaking 的文件名
 */
const PurifyCssPlugin = require("purifycss-webpack");
exports.purifyCSS = ({paths}) => ({
 plugins : [
  new PurifyCssPlugin({paths})
 ]
})

/**
 * @name autoprefixer 为css样式添加浏览器前缀
 * @author wangchong
 */
exports.autoprefix =() =>({
 loader : "postcss-loader",
 options : {
  plugins : () => [require("autoprefixer")]
 }
})

/**
 * @name loadImage :打包图片资源
 * @param include 所要打包的文件夹
 * @param exclude 跳过打包的文件夹
 * @param options loader的options配置
 */
exports.loadImage = ({include,exclude,options} = {}) => ({
 module : {
  rules : [
   {
    test : /\.(png|jpg)$/,
    include,
    exclude,
    use : {
     loader : "url-loader",
     options,
    }
   }
  ]
 }
})

文章总结自:Surviejs-webpack。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 #Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 #Javascript
JS实现图片拖拽交换效果
Nov 30 #Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 #Javascript
jQuery实现网页拼图游戏
Apr 22 #jQuery
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 #Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
You might like
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
JavaScript闭包详解
2015/02/02 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
从vue源码看props的用法
2019/01/09 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
python树莓派红外反射传感器
2019/01/21 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
django 简单实现登录验证给你
2019/11/06 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
公司司机岗位职责
2014/02/07 职场文书
高考寄语大全
2014/04/08 职场文书
高一语文教学反思
2016/02/16 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
python数字图像处理:图像简单滤波
2022/06/28 Python