使用Webpack构建多页面程序的实现步骤
使用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/pages/**/index.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/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构建多页面程序的实现步骤的文章就介绍到这了,更多相关Webpack构建多页面内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了详解vue+vueRouter+webpack的简单实例,非常具有实用价值,需要的朋友可以参考下...2017-06-24
- 这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应 原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式 最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌...2015-10-23
- 本文主要介绍了webpack搭建脚手架打包TypeScript代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-21
Webpack打包css后z-index被重新计算的解决方法
这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。...2017-06-24- 我们运行打包后会发现less转为了css文件,但css文件确通过js加入style标签,下面我们将css进行拆分出来,并以link标签引入,具体实现步骤一起看看吧...2021-10-19
详解webpack的clean-webpack-plugin插件报错
这篇文章主要介绍了详解webpack的clean-webpack-plugin插件报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-17- 本篇文章主要介绍了vue-cli webpack 开发环境跨域详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-22
深入webpack打包原理及loader和plugin的实现
这篇文章主要介绍了深入webpack打包原理及loader和plugin的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-07Webpack-cli安装成功后查看webpack -v报错案例详解
这篇文章主要介绍了Webpack-cli安装成功后查看webpack -v报错案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-09-08- 这篇文章主要介绍了Webpack 实现 AngularJS 的延迟加载的相关资料,需要的朋友可以参考下...2016-03-03
- 移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度。本文主要介绍了webpack的移动端适配方案,感兴趣的可以了解一下...2021-07-25
利用webpack理解CommonJS和ES Modules的差异区别
这篇文章主要介绍了利用webpack理解CommonJS和ES Modules的差异区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-17- 最近在学习 Webpack 相关的原理,本文用80行代码写一个Webpack插件并发布到npm,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-24
- 这篇文章主要为大家详细介绍了vue-cli+webpack创建记事本项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-03
- 这篇文章主要介绍了使用webpack和rollup打包组件库的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-25
- 这篇文章主要介绍了使用Webpack构建多页面程序的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16
- 这篇文章主要介绍了详解webpack解惑:require的五种用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-15
- 这篇文章主要给大家介绍了关于webpack如何自动生成网站图标的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2022-01-23
- 本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2022-10-19
- webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler),下面这篇文章主要给大家介绍了关于webpack打包进度展示以及美化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下...2022-01-24