一次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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
微信小程序实现吸顶效果
Jan 08 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php HandlerSocket的使用
2011/05/02 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
使javascript也能包含文件
2006/10/26 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python提取网页中超链接的方法
2016/09/18 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
使用python3构建文件传输的方法
2019/02/13 Python
值得收藏的10道python 面试题
2019/04/15 Python
python3 线性回归验证方法
2019/07/09 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
新学期决心书
2014/03/11 职场文书
食品安全宣传标语
2014/06/07 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫