一次Webpack配置文件分離的示例分析

這篇文章給大家分享的是有關(guān)一次Webpack配置文件分離的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),花山企業(yè)網(wǎng)站建設(shè),花山品牌網(wǎng)站建設(shè),網(wǎng)站定制,花山網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,花山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

單個配置文件所造成的問題

本文默認電腦前的你已經(jīng)了解一些Webpack基礎(chǔ)的配置，并懂得了webpack.config.js配置文件的基礎(chǔ)搭建。

隨著我們業(yè)務(wù)邏輯的增多，圖片、字體、css、ES6以及CSS預(yù)處理器和后處理器逐漸的加入到我們的項目中來，進而導(dǎo)致配置文件的增多，使得配置文件書寫起來比較繁瑣，更嚴重者（書寫特定文件的位置會出現(xiàn)錯誤）。更由于項目中不同的生產(chǎn)環(huán)境和開發(fā)環(huán)境的配置，使得配置文件變得更加糟糕。

使用單個的配置文件會影響到任務(wù)的可重用性，隨著項目需求的增長，我們必須要找到更有效地管理配置文件的方法。

管理配置文件的幾種方法

配置文件的管理有一下幾種方法。

  • 在每個環(huán)境的多個文件中維護配置，并通過--config參數(shù)將webpack指向每個文件，通過模塊導(dǎo)入共享配置。

  • 將配置文件推送到庫，然后引用庫。

  • 將配置文件推送到工具。

  • 維護單個配置文件的所有配置并在那里進行分支并依賴--env參數(shù)。

本文以第四種方式闡述webpack配置文件的分離。

分離配置文件

我們在根目錄下創(chuàng)建config文件夾，并創(chuàng)建四個配置文件，分別是：

  • webpack.comm.js   公共環(huán)境的配置文件

  • webpack.development.js    開發(fā)環(huán)境下的配置文件

  • webpack.production.js     生產(chǎn)環(huán)境下的配置文件

  • webpack.parts.js      各個配置零件的配置文件

一次Webpack配置文件分離的示例分析

合并配置文件的工具

如果配置文件被分成了許多不同的部分，那么必須以某種方式來組合他們，通常就是合并數(shù)組和對象，webpack-merge很好的做到了這一點。

webpack-merge做了兩件事：它允許連接數(shù)組并合并對象，而不是覆蓋組合。

const merge = require("webpack-merge");
merge(
 {a : [1],b:5,c:20},
 {a : [2],b:10, d: 421}
)
//合并后的結(jié)果
{a : [1,2] ,b :10 , c : 20, d : 421}

使用webpack-merge合并配置文件

首先將webpack-merge添加到項目中

npm install webpack-merge --save-dev

首先設(shè)置各個配置文件的連接

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的值來判斷是開發(fā)環(huán)境還是生產(chǎn)環(huán)境

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參數(shù)mode環(huán)境參數(shù)傳入到webpack.config.js中，就可以判斷是生產(chǎn)環(huán)境還是開發(fā)環(huán)境。

如何寫出可配置的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導(dǎo)出單個配置零件，通過解構(gòu)賦值來傳入?yún)?shù)。使用數(shù)組的concat來連接外部導(dǎo)入的loader。參數(shù)解析：

  • reg:表示loader匹配的test正則，默認為css，這里可以是（less、sass、stylus）。

  • include:表示所要打包的文件夾。

  • exclude：表示要跳過打包的文件夾。

  • uses：外部導(dǎo)入的loader。

在webpack.development.js中引入

module.exports = merge([
 config,
 parts.loadCSS({
  reg : /\.less/,
  use : ["less-loader"]
 }),
 parts.loadCSS(),
])

分離配置文件的好處

配置文件拆分可以是我們繼續(xù)擴展配置。最重要的收益是我們可以提取不同目標之間的共性。并且還可以識別要組合的較小配置部件，這些配置不見可以推送到自己的軟件包以跨項目使用。還可以將配置作為依賴項進行管理，而不是在多個項目中復(fù)制類似的配置。

我自己的parts配置

展示一部分我自己的部件配置，由于在學(xué)習(xí)階段，不足的地方還望大佬們提出，學(xué)習(xí)進步。

/**
 * @name 本地服務(wù)器配置
 * @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 監(jiān)聽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,
    }
   }
  ]
 }
})

感謝各位的閱讀！關(guān)于“一次Webpack配置文件分離的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁名稱：一次Webpack配置文件分離的示例分析
本文網(wǎng)址：http://muchs.cn/article4/gphiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站制作、定制開發(fā)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)