開箱即用的多頁面webpack腳手架

sunnyxd 發布于2019-08-22 17:17 / 3499人閱讀

摘要：開箱即用的多頁面腳手架最近接手一個新項目，公司官網，官網為了對爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護同樣痛苦。還不如創建一個腳手架，以后遇到這種官網多頁面的需求的時候拿來即用，豈不美哉。

開箱即用的多頁面webpack腳手架

最近接手一個新項目，公司官網，官網為了對爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來覺得幾個簡單的頁面還需要配置webpack挺麻煩，直接ES5，css，html寫寫就ok，可是一旦下手開始寫，離開了前端的各種得心應手的工具，回到了刀耕火種的時代。痛不欲生，即使寫完了，以后的迭代維護同樣痛苦。還不如創建一個腳手架，以后遇到這種官網多頁面的需求的時候拿來即用，豈不美哉。

好了，背景就是這些，本腳手架適合做官網之類的多頁面的應用。本腳手架已經支持使用ES6，less，模塊化，熱加載，eslint等功能

Build Setup

# 安裝依賴
npm install

# 開發的時候在本地啟localhost:8080，并開始熱加載
npm run dev

# production的發布時打包
npm run build

目錄結構

└─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            // 開發環境的webpack配置文件
│  webpack.config.prod.js           // 生成環境的webpack配置文件

開發流程

如果增加新頁面，只需兩步，不需要改webpack等配置文件

在pages中新增一個文件夾

在page.config.js中添加這個頁面的信息即可

比如

  {
    name: "contact",
    html: "contact/contact.html",
    jsEntry: "contact/contact.js"
  }

腳手架地址： https://github.com/JesseZhao1...

評論區問題匯總 1. 如何引入bootstrap

安裝bootstrap

npm install --save bootstrap@3

由于bootstrap依賴jquery，所以也需要安裝這個庫

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
事實上，開始的時候我用的也是import，但是隨后發現bootstrap在控制臺報錯，說需要jquery，我明明import進來jquery了啊。

因為require和import在引入文件時有很大區別，require是動態化的，而import是靜態引入的

GPU云服務器云服務器開箱即用 webrtc php用的多嗎 python用的多嗎 linux用的多嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95035.html

開箱即用的多頁面webpack腳手架

摘要：開箱即用的多頁面腳手架最近接手一個新項目，公司官網，官網為了對爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護同樣痛苦。還不如創建一個腳手架，以后遇到這種官網多頁面的需求的時候拿來即用，豈不美哉。開箱即用的多頁面webpack腳手架最近接手一個新項目，公司官網，官網為了對爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來...

atinosun 2019-08-02 10:27 評論0 收藏0
基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發環境配置，開箱即用，

摘要：開箱即用的多頁面腳手架基于模塊化開發可復用的現代化網站感興趣的朋友，請點個及時關注項目更新請點個項目請提特性支持前后端分離開發配置完整的打包方案支持本地開發熱更新集成代碼風格校驗支持編寫源碼，編譯生成生產代碼內置開發環境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發可復用的現代化網站(Without Vu...

junfeng777 2019-08-23 12:29 評論0 收藏0
Webpack構建多頁應用心得體會

摘要：構建的基于的多頁應用腳手架，本文聊聊本次項目中構建多頁應用的一些心得體會。倉庫構建的舊版多頁應用構建的多頁應用。例如多頁應用中每個的值對應的文件。Webpack構建的基于zepto的多頁應用腳手架，本文聊聊本次項目中Webpack構建多頁應用的一些心得體會。 1.前言由于公司舊版的腳手架是基于Gulp構建的zepto多頁應用（有興趣可以看看web-mobile-cli），有著不少的痛點。例...

Ethan815 2019-05-22 19:15 評論0 收藏0
告別webpack react 搭建多頁面之痛

摘要：搭建多頁面應用在往下看之前請確保先上個涼的吃著目錄結構編譯結果配置文件腳本存放處項目開發中一些常用的方法主要存放和請求有關的靜態文件模版文件項目開發中一些常用的方法其實我覺得可以和放在一塊，但是個人習慣還是分開啦開始擼代碼如何創建多頁面應用 webpack4 搭建 react 多頁面應用在往下看之前請確保nodejs > 8.X 先上個涼的吃著目錄結構 . ├── dist ...

seanHai 2019-08-23 15:25 評論0 收藏0