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

前言

随着前端技术的发展，业务逻辑的增加和功能的复杂成为前端人员最烧脑的问题。前端自动化搭建工具的出现，给前端人员带来了项目建设的福音，成为了每个前端工程师必须回归的技术栈。目前流行的Webpack以一切都是模块化的思想来构建我们的前端项目，这也是笔者正在使用的一个前端自动化构建工具。

Webpack对每个前端人员来说都不陌生。它把每一个静态文件作为一个模块，经过一系列的处理，为我们集成了最终需要的js、css、图片、字体等文件。

Webpack.config.js是Webpack的配置文件，需要在项目根目录下手工创建。

下面就不多说了，我们来看看详细的介绍

单一配置文件导致的问题

在本文中，默认情况下，您已经知道了Webpack的一些基本配置和webpack.config.js配置文件的基本构造。

随着我们业务逻辑的增加，图片、字体、css、ES6、CSS前处理器、后处理器逐渐加入到我们的项目中，导致配置文件的增加，使得配置文件的编写变得繁琐，甚至更糟糕(编写特定文件时会出现错误)。而且由于项目中不同生产开发环境的配置，配置文件变得更差。

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

管理配置文件的几种方法

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

在每个环境的多个文件中维护配置，通过- config参数将webpack指向每个文件，并通过模块导入共享配置。将配置文件推送到库，然后引用该库。将配置文件推送到工具。维护单个配置文件的所有配置，并在那里分支，依赖- env参数。在本文中，第四种方法描述了webpack配置文件的分离。

分离配置文件

我们在根目录下创建配置文件夹，并创建四个配置文件，它们是：

Webpack.comm.js公共环境配置文件webpack.development.js开发环境配置文件webpack.production.js生产环境配置文件webpack.parts.js每个配置部分的配置文件

用于合并配置文件的工具

如果配置文件被分成许多不同的部分，它们必须以某种方式组合，通常是组合数组和对象。webpack-merge很好地做到了这一点。

Webpack-merge做了两件事：它允许你连接数组和合并对象，而不是覆盖组合。

const merge=require(' web pack-merge ')；合并({a: [1]，b:5，c:20}，{a: [2]，b:10，d : 421 })//合并结果{a: [1，2]，b:10，b:10。

首先向项目添加webpack-merge

Npm安装web pack-合并-保存-开发首先设置每个配置文件的连接

webpack.config.js

const commConfig=require('。/config/web pack.comm ')；const developmentConfig=requie('。/config/web pack . development’)；const productionConfig=require('。/config/web pack . development)const merge=require(' web pack-merge ')；module . exports=mode={ if(mode==' production '){ return merge(commConfig，productionConfig，{ mode })；}返回合并(commConfig、developmentConfig、{ mode })；}以上代码使用mode的值来判断是开发环境还是生产环境

webpack.comm.js

const merge=require(' web pack-merge ')；Const parts=require('。/webpack。parts ')//导入配置部件文件const config={//写入公共配置} module.exports=merge ([config，parts.]) webpack。production.js。

const merge=require(' web pack-merge ')；const parts=require('。/web pack . parts ')；//导入配置部件文件const config={//写入公共配置}模块. exports=merge ([config，parts.]) webpack.development.js。

const merge=require(' web pack-merge ')；const parts=require('。/web pack . parts ')；//导入配置部件文件const config={//写入公共配置}模块。导出=合并([配置，零件.])，并使用- env值传递参数

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

dev ' : ' web pack-env development '，' prod ' : ' web pack-env production '，' dev 3360 server ' : ' web pack-dev-server-env development '，使env参数模式环境参数传入webpack.config.js，可以判断是

如何编写可配置的webpack.parts.js

从上面可以看出，我们已经创建了一个新的webpack.parts.js文件，它主要存储了我们的一些配置部分。如何编写可配置和可插拔的配置部分？是我们文件中最重要的部分。

以loadCSS为例：

exports.loadCSS=({reg=/\)。css$/，包含，排除，使用=[]}={ })=({ module : { rules : [{ test : reg，包含，排除，使用[{loader:' style-loader '，}，{loader:' CSS-loader '，}]。concat (uses)、}]})在上面的代码中，export用于导出单个配置部分，参数通过解构和赋值传递进来。使用数组的concat连接从外部导入的加载程序。参数分辨率：

Reg:表示loader匹配的测试是常规的，默认值是css，可以是(less、sass、手写笔)。Include:指示要打包的文件夹。排除：指示要跳过打包的文件夹。用途：外部进口装载机。在webpack.development.js中引入

module.exports=merge ([config，parts.loadcss ({reg:/\)。less/，use: ['less-loader']})，parts.loadcss()，])分隔配置文件

配置文件拆分可以是我们继续扩展的配置。最重要的好处是我们可以提取不同目标之间的共性。并且还可以确定要组合的更小的配置部分，这些部分可以被推送到自己的软件包中，以供跨项目使用。您也可以将配置作为依赖项来管理，而不是在多个项目中复制类似的配置。

我自己的零件配置

展示一部分我自己的组件配置，因为在学习阶段，还是希望各位大佬提出不足，在学习中有所进步。

/* * * @名称本地服务器配置* @param主机打开的url * @param端口打开全球资源定位器(统一资源定位符)的端口号* */exports.devServer=({主机，端口}={ })=({ devServer : { stats : }仅限错误，主机，端口，open : true，overlay : true，}})/** * @name未从射流研究…中分离的cssLoader配置* @参数寄存器匹配文件的后缀名测试* @参数包括所要打包的文件夹* @param exclude跳过打包的文件夹* @param使用所要向加载样式中添加的加载程序*/导出。LoadCSS=({ reg=/\).css$/，include，exclude，use=[]}={ })={ return { module : { rule s : [{ test : reg，use :[{ loader : ' style-loader ' }，{ loader: 'css-loader' }].concat(uses)，include，exclude，}] }，}}/** * @name从射流研究…中分离的cssLoader配置* @参数寄存器匹配文件的后缀名测试* @参数包括所要打包的文件夹* @param exclude跳过打包的文件夹* @param使用所要向加载样式中添加的loader * */const minisextplugin=require(' mini-CSS-extract-plugin ')；exports.extractCSS=({reg=/\).css$/，include，exclude，use=[]}={ })={ const plugin=new minisextplugin({ filename : ' style/[name]-hash :5).css '，})返回{模块： {规则s : [{测试： reg，使用： [{加载器： minissextplugin。加载程序，选项： {公共路径： './' } }，{ loader: 'css-loader' }].concat(use)，include，exclude，}] }，plugins : [ plugin，] }}/** * @name css摇树：将没有用到的钢性铸铁扔掉* @param路径监听钢性铸铁摇树的文件名*/const purifycss plugin=require(' purifycss-web pack ')；出口。purifycss=({ path })=({ plugins :[新的purify CSS插件({ path })]})/* * * @ name autoprefixer为钢性铸铁样式添加浏览器前缀* @作者王充*/出口。autoprefix=()=({ loader : ' postss-loader '，选项： { plugins :()=[require(' autoprefixer ')]})/* * * @ name loadImage:打包图片资源* @参数包括所要打包的文件夹* @param exclude跳过打包的文件夹* @param选项加载器的选择配置*/exports . Loadimage=({包括，排除，选项}={ })=({ module : { rules : [{ test :/\ .(png|jpg)$/，包括，排除，使用： {加载程序： ' URL-加载程序'，选项，} } ] })文章总结自：Surviejs-webpack。

总结

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