一次Webpack配置文件的分離實戰記錄

這篇文章主要給大家介紹了關於一次Webpack配置文件的分離實戰記錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧

前言

隨着前端技術的發展，業務邏輯的增多及功能化的繁瑣已經成爲前端人員最燒腦的問題。前端自動化構建工具的出現，爲前端人員帶來了項目構建上的福音，成爲每個前端工程師必回的技術棧，目前比較流行的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-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。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對神馬文庫的支持。

一次Webpack配置文件的分離實戰記錄

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

京東面試：如何進行JVM調優？

Python 將PowerPoint (PPT/PPTX) 轉爲HTML

SQL優化-20231016

一次Webpack配置文件的分離實戰記錄

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結