首頁 web前端 js教程 如何利用webpack建立多頁應用

如何利用webpack建立多頁應用

Jun 01, 2018 am 09:23 AM
web webpack 頁面

这次给大家带来如何利用webpack构建多页面应用,利用webpack构建多页面应用的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

之前使用 vue2.x + webpack3.x 撸了一个 vue 单页脚手架

vue 版 spa 脚手架

有兴趣的同学可以看下,内附详细注释,适合刚学习 webpack 的童鞋.

react 版 spa 脚手架

但在一些场景下,单页应用显然无法满足我们的需求,于是便有了

mulXc-cli

好了,废话不多说,进入正题!!!!

文件结构 

├── build            构建服务和webpack配置
 ├──── build.js         构建全量压缩包 (打包项目)
 ├──── setting.js        多页面入口配置
 ├──── style.js         页面1对1抽取生成css文件
 ├──── utils.js         工具类
 ├──── webpack.base.conf.js   webpack通用配置
 ├──── webpack.dev.conf.js    webpack开发环境配置
 ├──── webpack.prod.conf.js   webpack生产环境配置
├── config           webpack开发/生产环境部分配置
├── dist            项目打包目录
├── package.json        项目配置文件
├── src             项目目录
├──── common          多页面公用方法与css
├──── about           about页面
├──── home           home页面
登入後複製

思路

多页面应用,顾名思义:就是有多个页面(废话!!!)

从 webpack 的角度来看:

1.多个入口(entry),每个页面对应一个入口,理解为 js 资源.

2.多个 html 实例,webpack 使用html-webpack-plugin 插件来生成 html 页面.

3.每个页面需要对应的 css 文件.webpack 使用 extract-text-webpack-plugin 抽取 css.

这样我们一个多页面应用该有的东西都具备了,go,开撸!!!

入口配置与 html 页面生成

通过以上文件结构,我们可以找到我们在 build/setting.js 进行了多页面入口配置与 html 页面生成。

setting.js

//node 文件操作模块
const fs = require('fs');
//node 路径模块
const path = require('path');
//使用node.js 的文件操作模块来获取src文件夹下的文件夹名称 ->[about,common,home]
const entryFiles = fs.readdirSync(path.resolve(dirname, '../src'));
//生成html文件插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//工具类提取_resolve方法
const { _resolve } = require('./utils');
//入口文件过滤common文件夹(因为common文件夹我们用来存放多页面之间公用的方法与css,所以不放入入口进行构建!)
const rFiles = entryFiles.filter(v => v != 'common');
module.exports = {
 //构建webpack入口
 entryList: () => {
  const entryList = {};
  rFiles.map(v => {
   entryList[v] = _resolve(`../src/${v}/index.js`);
  });
  return entryList;
 },
 //src文件夹下的文件夹名称 ->[about,common,home]
 entryFiles: entryFiles,
 //使用html-webpack-plugin生成多个html页面.=>[home.html,about.html]
 pageList: () => {
  const pageList = [];
  rFiles.map(v => {
   pageList.push(
    new HtmlWebpackPlugin({
     template: _resolve(`../src/${v}/index.html`),
     filename: _resolve(`../dist/${v}.html`),
     chunks: ['common', v],
     //压缩配置
     minify: {
      //删除Html注释
      removeComments: true,
      //去除空格
      collapseWhitespace: true,
      //去除属性引号
      removeAttributeQuotes: true
     },
     chunksSortMode: 'dependency'
    })
   );
  });
  return pageList;
 }
};
登入後複製

webpack.base.conf.js

//引入setting.js 入口配置方法,与html生成配置
const { entryList, pageList } = require('./setting.js');
const baseConf = {
 entry: entryList(),
 plugins: [...pageList()]
};
登入後複製

css 文件生成

通过以上文件结构,我们可以找到我们在 build/style.js 进行了 css 文件生成。

style.js

const path = require('path');
//抽取css文件插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//引入入口配置
const { entryList, entryFiles } = require('./setting.js');
//多个ExtractTextPlugin实例
const plugins = [];
entryFiles.map(v => {
 plugins.push(
  new ExtractTextPlugin({
   filename: `css/${v}.[contenthash].css`,
   allChunks: false
  })
 );
});
module.exports = {
 //使用正则匹配到每个页面对应style文件夹下的css/less文件,并配置loader来进行解析.从而实现html<->css 1对1
 rulesList: () => {
  const rules = [];
  entryFiles.map((v, k) => {
   rules.push({
    test: new RegExp(`src(\\\\|\/)${v}(\\\\|\/)style(\\\\|\/).*\.(css|less)$`),
    use: plugins[k].extract({
     fallback: 'style-loader',
     use: ['css-loader', 'postcss-loader', 'less-loader']
    })
   });
  });
  return rules;
 },
 //插件实例
 stylePlugins: plugins
};
登入後複製

webpack.prod.conf.js

//引入方法
const { rulesList, stylePlugins } = require('./style.js');
const prodConf = {
 module: {
  rules: [...rulesList()]
 },
 plugins: [...stylePlugins]
};
登入後複製

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS反射与依赖注入使用案例分析

怎样使用Webpack对项目进行开发

以上是如何利用webpack建立多頁應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1421
52
Laravel 教程
1315
25
PHP教程
1266
29
C# 教程
1239
24
如何在Word複製頁面 如何在Word複製頁面 Feb 20, 2024 am 10:09 AM

是否要複製MicrosoftWord中的頁面,並保持格式不變?這是一個聰明的想法,因為當您想要建立特定文件佈局或格式的多個副本時,在Word中複製頁面可能是一種有用的節省時間的技術。本指南將逐步引導您在Word中複製頁面的過程,無論是建立範本還是複製文件中的特定頁面。這些簡單的說明旨在幫助您輕鬆地重新製作頁面,省去從頭開始的麻煩。為什麼要在MicrosoftWord中複製頁面?在Word中複製頁面非常有益的原因有以下幾點:當您有一個具有特定佈局或格式的文件要複製時。與從頭開始重新建立整個頁面不同

如何在iPhone上自訂和編輯待機模式:iOS 17的新功能 如何在iPhone上自訂和編輯待機模式:iOS 17的新功能 Sep 21, 2023 pm 04:01 PM

待機是iOS17更新中的一項新功能,它提供了一種新的增強方式,可以在手機快速閒置時存取資訊。透過StandBy,您可以輕鬆查看時間、查看即將發生的事件、瀏覽日曆、獲取您所在位置的天氣更新等等。啟動後,iPhone在充電時設定為橫向時會直觀地進入待機模式。此功能非常適合床頭櫃等無線充電點,或在日常任務中離開iPhone充電時。它允許您輕掃待機中顯示的各種小部件,以存取來自各種應用程式的不同資訊集。但是,您可能希望根據您的偏好和您經常需要的資訊修改這些小部件,甚至刪除一些小部件。因此,讓我們深入

如何快速刷新網頁? 如何快速刷新網頁? Feb 18, 2024 pm 01:14 PM

頁面刷新在我們日常的網路使用中非常常見,當我們訪問一個網頁後,有時會遇到一些問題,例如網頁加載不出來或顯示不正常等。這時候我們通常會選擇刷新頁面來解決問題,那麼要如何快速刷新頁面呢?下面我們就來探討頁面刷新的快捷鍵。頁面刷新快捷鍵是一種透過鍵盤操作來快速刷新目前網頁的方法。在不同的作業系統和瀏覽器中,頁面刷新的快捷鍵可能有所不同。下面我們以常見的W

處理Laravel頁面無法正確顯示CSS的方法 處理Laravel頁面無法正確顯示CSS的方法 Mar 10, 2024 am 11:33 AM

《處理Laravel頁面無法正確顯示CSS的方法,需要具體程式碼範例》在使用Laravel框架開發Web應用程式時,有時候會遇到頁面無法正確顯示CSS樣式的問題,這可能會導致頁面呈現不正常的樣式,影響使用者體驗。本文將介紹一些處理Laravel頁面無法正確顯示CSS的方法,並提供具體的程式碼範例,幫助開發者解決這個常見問題。一、檢查檔案路徑首先要檢查CSS檔案的路徑是

如何使用Golang實作網頁應用程式的表單驗證 如何使用Golang實作網頁應用程式的表單驗證 Jun 24, 2023 am 09:08 AM

表單驗證是Web應用程式開發中非常重要的環節,它能夠在提交表單資料之前對資料進行有效性檢查,避免應用程式出現安全漏洞和資料錯誤。使用Golang可以輕鬆實現網頁應用程式的表單驗證,本文將介紹如何使用Golang來實作網頁應用程式的表單驗證。一、表單驗證的基本要素在介紹如何實作表單驗證之前,我們需要知道表單驗證的基本要素是什麼。表單元素:表單元素是指

web標準是什麼東西 web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南,它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化,透過遵循這些標準,可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互,提供更好的使用者體驗和開發效率。

3秒跳轉頁面實作方法:PHP程式指南 3秒跳轉頁面實作方法:PHP程式指南 Mar 25, 2024 am 10:42 AM

標題:3秒跳轉頁面實作方法:PHP程式設計指南在網頁開發中,頁面跳轉是常見的操作,一般情況下我們使用HTML中的meta標籤或JavaScript的方法進行頁面跳轉。不過,在某些特定的情況下,我們需要在伺服器端進行頁面跳轉。本文將介紹如何使用PHP程式實作一個在3秒內自動跳到指定頁面的功能,同時會給出具體的程式碼範例。 PHP實現頁面跳躍的基本原理PHP是一種在

重新排列、停用和刪除 iPhone 主畫面頁面的方法 重新排列、停用和刪除 iPhone 主畫面頁面的方法 Nov 29, 2023 am 08:22 AM

在iOS中,Apple允許您停用iPhone上的單一主畫面頁面。還可以重新排列主螢幕頁面的順序,並直接刪除頁面,而不僅僅是停用它們。這是它的工作原理。如何重新排列主畫面頁面觸碰並按住主畫面上的空格以進入抖動模式。輕點代表主螢幕頁面的圓點行。在顯示的主螢幕網格中,輕觸並拖曳頁面以將其相對於其他頁面重新排列。其他人會移動以響應您的拖曳動作。當您對新排列感到滿意時,點擊螢幕右上角的“完成”,然後再次點擊“完成”以退出抖動模式。如何停用或刪除主畫面頁面觸碰並按住主畫面上的空格可進入抖動模式。輕點代表主螢幕

See all articles