Webpack實現(xiàn)多頁面打包的方法步驟

更新時間：2023年01月09日 10:18:36 作者：aiguangyuan

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

1. 多頁面應用(MPA)概念

單頁面在開發(fā)時會把所有的業(yè)務放在一個大的入口里面去，不同的子業(yè)務還是同一個URL地址，只不過后面的hash會有所不同。

多頁面相對于單頁面的區(qū)別在于，項目發(fā)布上線以后，有多個入口文件，每一次頁面跳轉(zhuǎn)的時候，后臺服務器都會返回一個新的html文檔，這種類型的網(wǎng)站也就是多頁面網(wǎng)站，也叫多頁應用。

多頁面有什么優(yōu)勢呢？主要有以下兩點：

1. 多個頁面之間是解耦的，利于維護；

2. 多頁面對SEO更加友好；

2. 多頁面打包基本思路

多頁面打包的基本思路在于，每個頁面對應一個entry，每個頁面對應一個html-webpack-plugin，但這種方式每次在新增或刪除頁面時需要修改webpack配置，相當麻煩。

3. 多頁面打包通用方案

1. 多個頁面的文件名統(tǒng)一取名index，通過不同的文件夾來區(qū)分；

2. 動態(tài)獲取 entry 和設(shè)置 html-webpack-plugin 數(shù)量；

4. 多頁面打包實現(xiàn)

4.1. 安裝插件；

npm i glob -D

4.2. 配置Webpack文件；

'use strict';
// 引入插件
const glob = require('glob');
const path = require('path');
const webpack = require('webpack');
 
// 頁面打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 自動清理插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 優(yōu)化控制臺輸出
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
 
// 動態(tài)計算多頁面打包
const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugins = [];
    // 獲取本地按規(guī)則修改好的文件
    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
 
    Object.keys(entryFiles).map((index) => {
 
        const entryFile = entryFiles[index];
 
        // 'my-project/src/index/index.js'
 
        const match = entryFile.match(/src\/(.*)\/index\.js/);
        // 獲取頁面文件名
        const pageName = match && match[1];
 
        entry[pageName] = entryFile;
        // 根據(jù)本地定義的頁面文件數(shù)量來定義htmlWebpackPlugin
        htmlWebpackPlugins.push(
            new HtmlWebpackPlugin({
                template: path.join(__dirname, `src/${pageName}/index.html`),
                filename: `${pageName}.html`,
                chunks: [pageName],
                inject: true,
                minify: {
                    html5: true,
                    collapseWhitespace: true,
                    preserveLineBreaks: false,
                    minifyCSS: true,
                    minifyJS: true,
                    removeComments: false
                }
            })
        );
    });
 
    return {
        entry,
        htmlWebpackPlugins
    }
}
 
const { entry, htmlWebpackPlugins } = setMPA();
 
module.exports = {
    // 入口文件
    entry: entry,
    // 輸出文件
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 開發(fā)模式
    mode: 'development',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        // 熱更新插件
        new webpack.HotModuleReplacementPlugin(),
        // 自動清理插件
        new CleanWebpackPlugin(),
        // 簡化打包控制臺輸出
        new FriendlyErrorsWebpackPlugin()
 
    ].concat(htmlWebpackPlugins),
 
    // 熱更新相關(guān)配置
    devServer: {
        // 基本目錄
        contentBase: './dist',
        // 熱更新
        hot: true,
        // 只輸出報錯
        stats: 'errors-only'
    },
    devtool: 'cheap-source-map'
};

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

您可能感興趣的文章: