摘要:之前寫了一個多頁應用的配置,只有一個文件,實現(xiàn)了多入口配置打包資源文件處理。而且官方都提供了自己的腳手架。雖然也有很多別人寫的多頁配置,但是感覺配置模塊分離過于嚴重,而且滿足不了自己的需求,不適合新手學習使用。
之前寫了一個webpack多頁應用的配置,只有一個webpack.config.js文件,實現(xiàn)了多入口配置打包css,js,資源文件處理。因為入口entry配置需要自己添加,HtmlWebpackPlugin有多少個頁面也要自己添加。這樣看來雖然配置是成功的,但過于機械化,是不可取的為什么要進行多頁應用配置?
我們都知道開發(fā)vue,react這些應用時,一般都只有一個入口文件。而且官方都提供了自己的腳手架??芍^是很繁瑣,偏離自己實際開發(fā)的環(huán)境時,這些腳手架就不能滿足我們的要求了。雖然也有很多別人寫的多頁配置,但是感覺配置模塊分離過于嚴重,而且滿足不了自己的需求,不適合新手學習使用。
很多傳統(tǒng)網(wǎng)頁的開發(fā)還是要寫很多靜態(tài)界面,比如我們公司,官網(wǎng)展示類的網(wǎng)站。如果要按照傳統(tǒng)的開發(fā)模式,我們要為不同的頁面添加css文件,js文件,這樣大大的增加了工作量,而且很枯燥。而且不能使用es6,scss.讀取頁面,進行多入口配置
所以這個webpack多頁配置就是為了解決這些問題,擁抱es6.
完整配置:webpack-M-pages
本著約定大于配置的原則,我們對頁面文件的放置進行一定的約束。
保持html文件名與入口js文件名一致,使用glob模塊,動態(tài)讀取文件夾生成配置
└─pages //頁面配置目錄 ├─index │ index.html │ index.js │ ├─pageA │ pageA.html │ pageA.js │ └─pageB pageB.html pageB.js先看下腳手架的目錄
│ .babelrc │ .gitignore │ .postcssrc.js │ getEntrys.js │ package-lock.json │ package.json │ README.md │ webpack.config.js │ ├─config │ base.plugin.js //包含動態(tài)生成HtmlWebpackPlugin │ entrys.js //動態(tài)入口與HtmlWebpackPlugin動態(tài)生成 │ utils.js │ └─src ├─assets │ ├─css │ │ │ bootstrap.css │ │ │ index.scss │ │ │ │ │ ├─pageA │ │ │ a.css │ │ │ as.scss │ │ │ │ │ ├─pageB │ │ │ b.css │ │ │ bb.scss │ │ │ │ │ └─pageC │ │ c.css │ │ │ ├─fonts │ │ glyphicons-halflings-regular.eot │ │ glyphicons-halflings-regular.svg │ │ glyphicons-halflings-regular.ttf │ │ glyphicons-halflings-regular.woff │ │ glyphicons-halflings-regular.woff2 │ │ │ └─img │ ph.jpg │ ├─common │ ├─css │ │ reset.css │ │ │ └─js │ common.js │ ├─js │ │ testm.js │ │ │ └─other │ a.js │ b.js │ ├─lib │ test.js │ └─pages //頁面配置目錄 ├─index │ index.html │ index.js │ ├─pageA │ pageA.html │ pageA.js │ └─pageB pageB.html pageB.js自動注入entry配置
webpack的entry配置是這樣的
module.exports = { devtool: "#source-map", entry:{ index:"", about:"", home:"", ..... } }動態(tài)讀取html頁面,配置多入口
//entrys.js var glob = require("glob") var path = require("path") var PAGES_DIR = path.resolve(__dirname, "../src/pages") exports.entries = function () { var entryFiles = glob.sync(PAGES_DIR + "/*/*.js") var resultEntry = {} entryFiles.forEach(filePath => { var filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf(".")) resultEntry[filename] = filePath }) return resultEntry }
OK,這樣我們的入口配置文件就可以這樣簡寫了。
const { entries } = require("./config/entrys"); module.exports = { devtool: "#source-map", entry: entries(), }HtmlWebpackPlugin
這個其實就和自動注入entry配置一樣,所以我們先看下 HtmlWebpackPlugin的配置
new HtmlWebpackPlugin({ template: "index.html", filename: "index.html", chunks: ["vendors","index"], // hash:true, minify: { removeComments: true, collapseWhitespace: false //刪除空白符與換行符 } });動態(tài)配置 HtmlWebpackPlugin
//讀取html文件 exports.htmlPages = function () { var entryHtmls = glob.sync(PAGES_DIR + "/*/*.html") var resultHtmlPages = [] entryHtmls.forEach(filePath => { var filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf(".")) var htmlPlugin = { template: filePath, filename: filename + ".html", chunks: filename, inject: true } resultHtmlPages.push(htmlPlugin) }) return resultHtmlPages }遍歷頁面,添加配置
/*遍歷頁面,添加配置*/ let { htmlPages } = require("./entrys"); let pageArr = htmlPages(); pageArr.forEach(page => { const htmlPlugin = new HtmlWebpackPlugin({ template: page.template, filename: page.filename, chunks: ["vendors", page.chunks], // hash:true, minify: { removeComments: true, collapseWhitespace: false //刪除空白符與換行符 } }); base_plugin.push(htmlPlugin); });優(yōu)化chunks
let chunksArr = []; pageArr.forEach(page => { chunksArr.push(page.chunks); }); new webpack.optimize.CommonsChunkPlugin({ name: "vendors", chunks: chunksArr, //提取公用模塊 minChunks: Infinity }),溫馨提示
如何在windows下使用cmd命令生成文件樹?
tree /f > tree.txt
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83660.html
摘要:原文地址如果您對本系列文章感興趣,歡迎關注訂閱這里前言本文介紹如何在多項目間共用同一套基礎設施,又或是某種層次的框架。而以上所述的種種,就構(gòu)成了一套完整的解決方案,也稱基礎設施。下面就以從到的改造過程來介紹如何實現(xiàn)多項目共用基礎設施。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上,非經(jīng)作者同意,請勿轉(zhuǎn)載。原文地址:https://segmentfault.com/a/1190...
摘要:本文首發(fā)于的技術(shù)博客實用至上,非經(jīng)作者同意,請勿轉(zhuǎn)載。原文地址如果您對本系列文章感興趣,歡迎關注訂閱這里前言書承上文多頁應用架構(gòu)系列十如何打造一個自定義的。終于,發(fā)現(xiàn)了這一大殺器,打包時間過長的問題得到完美解決。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上,非經(jīng)作者同意,請勿轉(zhuǎn)載。原文地址:https://segmentfault.com/a/119000000710437...
摘要:在上一篇文章多頁應用架構(gòu)系列二配置常用部分有哪些中,我介紹了如何配置多頁應用的入口,然而,如果僅僅如此操作,帶來的后果就是,打包生成出來的每一個入口文件都會完整包含所有代碼。的初始化常用參數(shù)有哪些,給這個包含公共代碼的命個名唯一標識。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上,非經(jīng)作者同意,請勿轉(zhuǎn)載。原文地址:https://segmentfault.com/a/1190...
摘要:用到什么了在多頁應用架構(gòu)系列二配置常用部分有哪些里我就說過,的核心只能打包文件,而以外的資源都是靠進行轉(zhuǎn)換或做出相應的處理的。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上,非經(jīng)作者同意,請勿轉(zhuǎn)載。原文地址:https://segmentfault.com/a/1190000006897458如果您對本系列文章感興趣,歡迎關注訂閱這里:https://segmentfault...
摘要:原文地址如果您對本系列文章感興趣,歡迎關注訂閱這里前言上文多頁應用架構(gòu)系列十二利用生成普通網(wǎng)頁頁面模板我們基本上已經(jīng)搞清楚如何利用來生成普通網(wǎng)頁頁面模板,本文將以我的腳手架項目介紹如何在這基礎上搭建一套簡單的模板布局系統(tǒng)。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上,非經(jīng)作者同意,請勿轉(zhuǎn)載。原文地址:https://segmentfault.com/a/1190000007...
閱讀 2987·2021-11-16 11:45
閱讀 5187·2021-09-22 10:57
閱讀 1774·2021-09-08 09:36
閱讀 1602·2021-09-02 15:40
閱讀 2517·2021-07-26 23:38
閱讀 1203·2019-08-30 15:55
閱讀 929·2019-08-30 15:54
閱讀 1220·2019-08-29 14:06