31 webpack中的多页应用

本文介绍了如何使用Webpack进行多页面应用(Mpa)的构建,通过HtmlWebpackPlugin插件实例化多次,分别配置每个页面的入口文件和输出HTML。示例代码展示了如何为index、about和news页面创建对应的JS入口和HTML模板。同时,建议对重复的配置进行封装以提高效率。案例源码可在提供的链接中下载。
摘要由CSDN通过智能技术生成

多页应用

之前我们的学习都是在单页面(Spa)程序的基础上进行的,在此章节,我们将介绍如何在Webpack中进行多页面应用(Mpa)的构建。

配置代码如下:

const HtmlwebpackPlugin = require('html-webpack-plugin');
const path = require("path");

module.exports = {
    entry: {
        index: './src/index/index.js',
        about: './src/about/index.js',
        news: './src/news/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlwebpackPlugin({
            // 模板文件
            template: './src/index/index.html',
            // 输出文件名称
            filename: path.resolve(__dirname, 'dist/index/index.html'),
            // 引入的chunk,在这里表示只引入生成的index.js
            // 默认的会引入 index about news三个js文件
            // chunks规定文件引入那些chunk
            chunks: ['index']
        }),
        new HtmlwebpackPlugin({
            template: './src/about/index.html',
            filename: path.resolve(__dirname, 'dist/about/index.html'),
            chunks: ['about']
        }),
        new HtmlwebpackPlugin({
            template: './src/news/index.html',
            filename: path.resolve(__dirname, 'dist/news/index.html'),
            chunks: ['news']
        }),
    ],
    devServer: {
        // 默认展示index/index.html
        contentBase: path.resolve(__dirname, 'dist/index')
    }
}

在这里我们多次使用HtmlwebpackPlugin插件来实现多页面的构建。对于多页面的构建,会产生很多重复的操作,你可以合理的组织项目的页面结构,然后封装一个工具函数,把重复的代码抽离出来,减少重复劳动。在这里还可以使用Web-webpack-plugin插件来实现多页面应用,同样该插件规定你的项目页面结构也是有规律性的。

本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/mpa.zip

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值