記一次Webpack配置文件的分離
隨着前端技術的發展，業務邏輯的增多及功能化的繁瑣已經成爲前端人員最燒腦的問題。前端自動化構建工具的出現，爲前端人員帶來了項目構建上的福音，成爲每一個前端工程師必回的技術棧，目前比較流行的Webpack以萬物皆模塊的思想構建咱們的前端項目，一樣也是筆者正在使用的一個前端自動化構建工具。javascript
Webpack對於每一個前端人員來講都不會怎麼陌生，它將每個靜態文件當作一個模塊，通過一系列的處理爲咱們整合出最後的須要的js、css、圖片、字體等文件。css
單個配置文件所形成的問題
本文默認電腦前的你已經瞭解一些Webpack基礎的配置，並懂得了webpack.config.js配置文件的基礎搭建。前端
隨着咱們業務邏輯的增多，圖片、字體、css、ES6以及CSS預處理器和後處理器逐漸的加入到咱們的項目中來，進而致使配置文件的增多，使得配置文件書寫起來比較繁瑣，更嚴重者（書寫特定文件的位置會出現錯誤）。更因爲項目中不一樣的生產環境和開發環境的配置，使得配置文件變得更加糟糕。java
使用單個的配置文件會影響到任務的可重用性，隨着項目需求的增加，咱們必需要找到更有效地管理配置文件的方法。webpack
管理配置文件的幾種方法
配置文件的管理有一下幾種方法。web
- 在每一個環境的多個文件中維護配置，並經過--config參數將webpack指向每一個文件，經過模塊導入共享配置。
- 將配置文件推送到庫，而後引用庫。
- 將配置文件推送到工具。
- 維護單個配置文件的全部配置並在那裏進行分支並依賴--env參數。
本文以第四種方式闡述webpack配置文件的分離。npm
分離配置文件
咱們在根目錄下建立config文件夾，並建立四個配置文件，分別是：json
- 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。
- 1. webpack（九）：webpack配置文件的分離
- 2. webpack配置 包含分離css文件
- 3. webpack4 配置文件分離
- 4. maven配置文件分離
- 5. webpack 配置文件
- 6. webpack的配置文件
- 7. webpack配置文件詳細分析
- 8. webpack 配置基礎-代碼分離
- 9. 不一樣配置下的webpack打包文件分析
- 10. webpack 配置文件說明
- 更多相關文章...
- • Maven 構建配置文件 - Maven教程
- • MyBatis配置文件詳解 - MyBatis教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. webpack（九）：webpack配置文件的分離
- 2. webpack配置 包含分離css文件
- 3. webpack4 配置文件分離
- 4. maven配置文件分離
- 5. webpack 配置文件
- 6. webpack的配置文件
- 7. webpack配置文件詳細分析
- 8. webpack 配置基礎-代碼分離
- 9. 不一樣配置下的webpack打包文件分析
- 10. webpack 配置文件說明