前言
隨著前端技術的發展，業務邏輯的增多及功能化的繁瑣已經成為前端人員最燒腦的問題。前端自動化構建工具的出現，為前端人員帶來了項目構建上的福音，成為每個前端工程師必回的技術棧，目前比較流行的Webpack以萬物皆模塊的思想構建我們的前端項目，同樣也是筆者正在使用的一個前端自動化構建工具。
Webpack對于每個前端人員來說都不會怎么陌生，它將每一個靜態文件當做一個模塊，經過一系列的處理為我們整合出最后的需要的js、css、圖片、字體等文件。
webpack.config.js就是Webpack的配置文件，這個文件需要自己在項目根目錄下手動建立。
下面話不多說了，來一起看看詳細的介紹吧
單個配置文件所造成的問題
本文默認電腦前的你已經了解一些Webpack基礎的配置，并懂得了webpack.config.js配置文件的基礎搭建。
隨著我們業務邏輯的增多，圖片、字體、css、ES6以及CSS預處理器和后處理器逐漸的加入到我們的項目中來，進而導致配置文件的增多，使得配置文件書寫起來比較繁瑣，更嚴重者（書寫特定文件的位置會出現錯誤）。更由于項目中不同的生產環境和開發環境的配置，使得配置文件變得更加糟糕。
使用單個的配置文件會影響到任務的可重用性，隨著項目需求的增長，我們必須要找到更有效地管理配置文件的方法。
管理配置文件的幾種方法
配置文件的管理有一下幾種方法。
本文以第四種方式闡述webpack配置文件的分離。
分離配置文件
我們在根目錄下創建config文件夾，并創建四個配置文件，分別是：
合并配置文件的工具
如果配置文件被分成了許多不同的部分，那么必須以某種方式來組合他們，通常就是合并數組和對象，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。參數解析：
在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。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
