文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用Webpack构建多页面程序的实现步骤

2024-04-02 19:55

关注

使用webpack搭建单页面程序十分常见,但在实际开发中我们可能还会有开发多页面程序的需求,因此我研究了一下如何使用webpack搭建多页面程序。

原理

将每个页面所在的文件夹都看作是一个单独的单页面程序目录,配置多个entry以及html-webpack-plugin即可实现多页面打包。

下面为本项目目录结构


.
├─ 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 模板

多页面打包基础配置

改造入口

传统的多入口写法可以写成键值对的形式


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

这样写的话,每增加一个页面就需要手动添加一个入口,比较麻烦,因此我们可以定义一个根据目录生成入口的函数来简化我们的操作


const glob = require('glob');

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

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

改造输出

在输出的配置项中,再将输出的文件名写死显示已经不合适了,因此我们要将名字改为与源文件相匹配的名字


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',
  }),
 ],
 ...
};

这样的做法与入口有着同样的毛病,因此我们再定义一个函数来生成这个配置


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

function getHtmlTemplate() {
 return glob
  .sync('./src/pagesindex.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/pagesindex.js').forEach((file) => {
  const name = file.match(/\/pages\/(.+)\/index.js/)[1];
  entry[name] = file;
 });
 return entry;
}

// 多页模板
function getHtmlTemplate() {
 return glob
  .sync('./src/pagesindex.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构建多页面程序的实现步骤的文章就介绍到这了,更多相关Webpack构建多页面内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯