使用Webpack構建多頁面程序的實現(xiàn)步驟

更新時間：2021年03月16日 10:24:10 作者：Tuzilow

這篇文章主要介紹了使用Webpack構建多頁面程序的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

使用webpack搭建單頁面程序十分常見，但在實際開發(fā)中我們可能還會有開發(fā)多頁面程序的需求，因此我研究了一下如何使用webpack搭建多頁面程序。

原理

將每個頁面所在的文件夾都看作是一個單獨的單頁面程序目錄，配置多個entry以及html-webpack-plugin即可實現(xiàn)多頁面打包。

下面為本項目目錄結構

.
├─ src
│ └─ pages
│    ├─ about
│    │  ├─ index.css
│    │  ├─ index.html
│    │  └─ index.js
│    └─ index
│      ├─ index.css
│      ├─ index.html
│      └─ index.js
└─ webpack.config.js

單頁面打包基礎配置

首先我們來看一下單頁面程序的 webpack 基礎配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: './src/index.js',
 plugins: [
  new HtmlWebpackPlugin({
   template: './src/index.html',
   filename: 'index.html',
  }),
 ],
 output: {
  path: path.resolve(__dirname, './dist'),
  filename: 'bundle.js',
 },
};

要想將其改為多頁面程序，就要將它的單入口和單 HTML 模板改為多入口和多 HTML 模板

多頁面打包基礎配置

改造入口

傳統(tǒng)的多入口寫法可以寫成鍵值對的形式

module.exports = {
 entry: {
  index: './src/pages/index/index.js',
  about: './src/pages/about/index.js',
 },
 ...
}

這樣寫的話，每增加一個頁面就需要手動添加一個入口，比較麻煩，因此我們可以定義一個根據(jù)目錄生成入口的函數(shù)來簡化我們的操作

const glob = require('glob');

function getEntry() {
 const entry = {};
 glob.sync('./src/pages/**/index.js').forEach((file) => {
  const name = file.match(/\/pages\/(.+)\/index.js/)[1];
  entry[name] = file;
 });
 return entry;
}

module.exports = {
 entry: getEntry(),
 ...
}

改造輸出

在輸出的配置項中，再將輸出的文件名寫死顯示已經(jīng)不合適了，因此我們要將名字改為與源文件相匹配的名字

module.exports = {
 ...
 output: {
  path: path.resolve(__dirname, './dist'),
  filename: 'js/[name].[contenthash].js',
 },
 ...
}

配置多個 html-webpack-plugin

與入口相同，可以將不同的 html 模板直接寫入插件配置中，這里我們需要為每個插件配置不同的chunks，防止 js 注入到錯誤的 html 中

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 ...
 plugins: [
  new HtmlWebpackPlugin({
   template: './src/pages/index/index.html',
   chunks: ['index'],
   filename: 'index.html',
  }),
  new HtmlWebpackPlugin({
   template: './src/pages/about/index.html',
   chunks: ['about'],
   filename: 'about.html',
  }),
 ],
 ...
};

這樣的做法與入口有著同樣的毛病，因此我們再定義一個函數(shù)來生成這個配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob');

function getHtmlTemplate() {
 return glob
  .sync('./src/pages/**/index.html')
  .map((file) => {
   return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file };
  })
  .map(
   (template) =>
    new HtmlWebpackPlugin({
     template: template.path,
     chunks: [template.name.toString()],
     filename: `${template.name}.html`,
    })
  );
}

 
module.exports = {
 ...
 plugins: [...getHtmlTemplate()],
 ...
};

這樣一個簡單的多頁面項目就配置完成了，我們還可以在此基礎上添加熱更新、代碼分割等功能，有興趣的可以自己嘗試一下

完整配置

項目地址：xmy6364/webpack-multipage

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 多頁入口
function getEntry() {
 const entry = {};
 glob.sync('./src/pages/**/index.js').forEach((file) => {
  const name = file.match(/\/pages\/(.+)\/index.js/)[1];
  entry[name] = file;
 });
 return entry;
}

// 多頁模板
function getHtmlTemplate() {
 return glob
  .sync('./src/pages/**/index.html')
  .map((file) => {
   return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file };
  })
  .map(
   (template) =>
    new HtmlWebpackPlugin({
     template: template.path,
     chunks: [template.name.toString()],
     filename: `${template.name}.html`,
    })
  );
}

const config = {
 mode: 'production',
 entry: getEntry(),
 output: {
  path: path.resolve(__dirname, './dist'),
  filename: 'js/[name].[contenthash].js',
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
   },
  ],
 },
 plugins: [new CleanWebpackPlugin(), ...getHtmlTemplate()],
 devServer: {
  contentBase: path.join(__dirname, 'dist'),
  compress: true,
  port: 3000,
  hot: true,
  open: true,
 },
};

module.exports = config;

到此這篇關于使用Webpack構建多頁面程序的實現(xiàn)步驟的文章就介紹到這了,更多相關Webpack構建多頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Three.js+React實現(xiàn)3D開放世界小游戲
本文使用?Three.js?+?React?+?CANNON?技術棧，實現(xiàn)通過滑動屏幕控制模型在3D世界里運動的?Low?Poly?低多邊形風格小游戲，感興趣的可以了解一下
2022-04-04
原生JS+HTML5實現(xiàn)跟隨鼠標一起流動的粒子動畫效果
這篇文章主要介紹了原生JS+HTML5實現(xiàn)跟隨鼠標一起流動的粒子動畫效果,涉及javascript事件響應、數(shù)值運算及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-05-05
elementUI?Table?表格編輯數(shù)據(jù)后停留當前位置的示例代碼
這篇文章主要介紹了elementUI?Table?表格編輯數(shù)據(jù)后停留當前位置,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
javascript中將Object轉(zhuǎn)換為String函數(shù)代碼 (json str)
下面的代碼就是想將Object轉(zhuǎn)換為String函數(shù),需要的朋友可以參考下
2012-04-04
使用javascript做在線算法編程
這篇文章主要介紹了使用javascript做在線算法編程的相關知識,需要的朋友可以參考下
2018-05-05
JavaScript正則表達式替換字符串中圖片地址(img src)的方法
這篇文章主要介紹了JavaScript正則表達式替換字符串中圖片地址(img src)的方法,結合實例形式分析了JS正則替換的常用技巧與注意事項,需要的朋友可以參考下
2017-01-01
js控制iframe的高度/寬度讓其自適應內(nèi)容
這篇文章主要介紹了如何使用js控制iframe的高度/寬度讓其自適應內(nèi)容,需要的朋友可以參考下
2014-04-04
原生js+css實現(xiàn)tab切換功能
這篇文章主要為大家詳細介紹了原生js+css實現(xiàn)tab切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
webpack踩坑系列之less-loader6.0.0的javascriptEnabled報錯問題
這篇文章主要介紹了webpack踩坑系列之less-loader6.0.0的javascriptEnabled報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
JS中驗證整數(shù)和小數(shù)的正則表達式
網(wǎng)上很多關于驗證小數(shù)的正則表達式，但是很多都不是百分百正確，所以我結合一些前輩的經(jīng)驗，寫了一個，分享到腳本之家平臺，對小數(shù)或整數(shù)正則表達式的相關知識感興趣的朋友一起看看吧
2018-10-10