一次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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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 危险函数全解析
2009/09/09 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP中->和=>的含义及使用示例解析
2020/08/06 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
JS面向对象编程详解
2016/03/06 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
浅谈Node 调试工具入门教程
2018/03/20 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解python中的数据类型和控制流
2019/08/08 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
《桃花心木》教学反思
2014/02/17 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
如何使用SQL Server语句创建表
2022/04/12 SQL Server
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS