資訊專欄INFORMATION COLUMN
摘要：開箱即用的多頁面腳手架最近接手一個(gè)新項(xiàng)目，公司官網(wǎng)，官網(wǎng)為了對(duì)爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護(hù)同樣痛苦。還不如創(chuàng)建一個(gè)腳手架，以后遇到這種官網(wǎng)多頁面的需求的時(shí)候拿來即用，豈不美哉。
開箱即用的多頁面webpack腳手架
最近接手一個(gè)新項(xiàng)目，公司官網(wǎng)，官網(wǎng)為了對(duì)爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來覺得幾個(gè)簡(jiǎn)單的頁面還需要配置webpack挺麻煩，直接ES5，css，html寫寫就ok，可是一旦下手開始寫，離開了前端的各種得心應(yīng)手的工具，回到了刀耕火種的時(shí)代。痛不欲生，即使寫完了，以后的迭代維護(hù)同樣痛苦。 還不如創(chuàng)建一個(gè)腳手架，以后遇到這種官網(wǎng)多頁面的需求的時(shí)候拿來即用，豈不美哉。
好了，背景就是這些，本腳手架適合做官網(wǎng)之類的多頁面的應(yīng)用。本腳手架已經(jīng)支持使用ES6，less，模塊化，熱加載，eslint等功能
Build Setup# 安裝依賴 npm install # 開發(fā)的時(shí)候在本地啟localhost:8080，并開始熱加載 npm run dev # production的發(fā)布時(shí)打包 npm run build目錄結(jié)構(gòu)
└─src // src 文件夾
│ ├─pages // 頁面文件夾
│ │ ├─about
│ │ │ about.html
│ │ │ about.js
│ │ │ about.less
│ │ │
│ │ ├─contact
│ │ │ contact.css
│ │ │ contact.html
│ │ │ contact.js
│ │ │
│ │ └─home
│ │ index.html
│ │ index.js
│ │ index.less
│ │
│ └─tools // 工具文件夾
│ utils.js
│
│ .babelrc // babel的配置文件
│ .eslintignore
│ .eslintrc.js // eslint的配置文件
│ .gitignore
│ ecosystem.config.js // pm2 deploy的配置文件
│ package.json
│ page.config.js // 頁面的配置文件
│ README.md
│ webpack.config.dev.js // 開發(fā)環(huán)境的webpack配置文件
│ webpack.config.prod.js // 生成環(huán)境的webpack配置文件
開發(fā)流程
如果增加新頁面，只需兩步，不需要改webpack等配置文件
在pages中新增一個(gè)文件夾
在page.config.js中添加這個(gè)頁面的信息即可
比如
{
name: "contact",
html: "contact/contact.html",
jsEntry: "contact/contact.js"
}
腳手架地址： https://github.com/JesseZhao1...
評(píng)論區(qū)問題匯總 1. 如何引入bootstrap安裝bootstrap
npm install --save bootstrap@3
由于bootstrap依賴jquery，所以也需要安裝這個(gè)庫
npm install --save jquery@3.3.1
在需要的頁面引入bootstrap的js文件和css文件
let $ = window.jQuery = require("jquery");
require("bootstrap");
import "bootstrap/dist/css/bootstrap.css";
釋疑： 為什么需要用require而不是用import
事實(shí)上，開始的時(shí)候我用的也是import，但是隨后發(fā)現(xiàn)bootstrap在控制臺(tái)報(bào)錯(cuò)，說需要jquery，我明明import進(jìn)來jquery了啊。
因?yàn)閞equire和import在引入文件時(shí)有很大區(qū)別，require是動(dòng)態(tài)化的，而import是靜態(tài)引入的
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95035.html
摘要：開箱即用的多頁面腳手架最近接手一個(gè)新項(xiàng)目，公司官網(wǎng)，官網(wǎng)為了對(duì)爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護(hù)同樣痛苦。還不如創(chuàng)建一個(gè)腳手架，以后遇到這種官網(wǎng)多頁面的需求的時(shí)候拿來即用，豈不美哉。 開箱即用的多頁面webpack腳手架 最近接手一個(gè)新項(xiàng)目，公司官網(wǎng)，官網(wǎng)為了對(duì)爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來...
摘要：開箱即用的多頁面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友，請(qǐng)點(diǎn)個(gè)及時(shí)關(guān)注項(xiàng)目更新請(qǐng)點(diǎn)個(gè)項(xiàng)目請(qǐng)?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風(fēng)格校驗(yàn)支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境，自動(dòng)加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...
摘要：構(gòu)建的基于的多頁應(yīng)用腳手架，本文聊聊本次項(xiàng)目中構(gòu)建多頁應(yīng)用的一些心得體會(huì)。倉庫構(gòu)建的舊版多頁應(yīng)用構(gòu)建的多頁應(yīng)用。例如多頁應(yīng)用中每個(gè)的值對(duì)應(yīng)的文件。Webpack構(gòu)建的基于zepto的多頁應(yīng)用腳手架，本文聊聊本次項(xiàng)目中Webpack構(gòu)建多頁應(yīng)用的一些心得體會(huì)。 1.前言 由于公司舊版的腳手架是基于Gulp構(gòu)建的zepto多頁應(yīng)用（有興趣可以看看web-mobile-cli），有著不少的痛點(diǎn)。例...
摘要：搭建多頁面應(yīng)用在往下看之前請(qǐng)確保先上個(gè)涼的吃著目錄結(jié)構(gòu)編譯結(jié)果配置文件腳本存放處項(xiàng)目開發(fā)中一些常用的方法主要存放和請(qǐng)求有關(guān)的靜態(tài)文件模版文件項(xiàng)目開發(fā)中一些常用的方法其實(shí)我覺得可以和放在一塊，但是個(gè)人習(xí)慣還是分開啦開始擼代碼如何創(chuàng)建多頁面應(yīng)用 webpack4 搭建 react 多頁面應(yīng)用 在往下看之前請(qǐng)確保nodejs > 8.X 先上個(gè)涼的吃著 目錄結(jié)構(gòu) . ├── dist ...
閱讀 3555·2019-08-30 15:53
閱讀 3464·2019-08-29 16:54
閱讀 2254·2019-08-29 16:41
閱讀 2530·2019-08-23 16:10
閱讀 3436·2019-08-23 15:04
閱讀 1433·2019-08-23 13:58
閱讀 418·2019-08-23 11:40
閱讀 2512·2019-08-23 10:26
