webpack多个Html,使用webpack构建多页面应用
关于webpack的配置和使用,网上已经有许多文章了,大多是在讲单页应用,当我们需要打包多个html时,事情就变得麻烦起来。怎么在webpack-dev-server里使用路由?怎么打包多个html和js chunk并自动更新md5?本文讲的就是如何解决这些问题。
这里假设你对Webpack已经有最基础的了解
需求
来看下我们的需求:
使用webpack-dev-server做开发时的服务器
在webpack-dev-server里使用路由,访问/a时候显示a.html,/b显示b.html
打包成多个html,给其中引用到资源加md5戳
主要目录结构
├── src
│ └── views # 每一个文件夹对应一个页面
│ └── a
│ └── index.js
│ └── b
│ └── index.js
├── output # 打包输出的目录
| └── ...
└── template.html # 将根据这个模版,生成各个页面的html
└── webpack.config.js
└── dev-server.js # webpack-dev-server + express
只列出了主要的目录,这里我们根据一个template.html来生成多个页面的html,他们之间只有引用的资源路径不同。当然,你也可以每个页面单独使用一个html模版。
Webpack 配置
这里主要解决两个小问题。
1. 打包多个页面的js文件
读取src/views下的目录,约定每一个目录当成一个页面,打包成一个js chunk。
2. 打包多个html
循环生成多个HtmlWebpackPlugin插件,把每一个插件的chunks各自指向上面打包的js chunk。
// webpack.config.js
var glob = require('glob');
var webpackConfig = {
/* 一些webpack基础配置 */
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
var files = glob.sync(globPath),
entries = {};
files.forEach(function(filepath) {
// 取倒数第二层(view下面的文件夹)做包名
var split = filepath.split('/');
var name = split[split.length - 2];
entries[name] = './' + filepath;
});
return entries;
}
var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
// 每个页面生成一个entry,如果需要HotUpdate,在这里修改entry
webpackConfig.entry[name] = entries[name];
// 每个页面生成一个html
var plugin = new HtmlWebpackPlugin({
// 生成出来的html文件名
filename: name + '.html',
// 每个html的模版,这里多个页面使用同一个模版
template: './template.html',
// 自动将引用插入html
inject: true,
// 每个html引用的js模块,也可以在这里加上vendor等公用模块
chunks: [name]
});
webpackConfig.plugins.push(plugin);
})
路由配置
在多页应用下,我们希望访问的是localhost:8080/a,而不是localhost:8080/a.html。
由于webpack-dev-server只是将文件打包在内存里,所以你没法在express里直接sendfile('output/views/a.html'),因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream,用来输出其内存里的文件,我们可以利用它来做路由。
注意,为了自定义路由,你可能需要引进express或koa之类的库,然后将webpack-dev-server作为中间件处理。
// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// webpack编译器
var compiler = webpack(webpackConfig);
// webpack-dev-server中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
});
app.use(devMiddleware)
// 路由
app.get('/:viewname?', function(req, res, next) {
var viewname = req.params.viewname
? req.params.viewname + '.html'
: 'index.html';
var filepath = path.join(compiler.outputPath, viewname);
// 使用webpack提供的outputFileSystem
compiler.outputFileSystem.readFile(filepath, function(err, result) {
if (err) {
// something error
return next(err);
}
res.set('content-type', 'text/html');
res.send(result);
res.end();
});
});
module.exports = app.listen(8080, function(err) {
if (err) {
// do something
return;
}
console.log('Listening at http://localhost:' + port + '\n')
})
最后,在package.json里定义下启动命令:
// package.json
{
scripts: {
"dev": "node ./dev-server.js"
}
}
运行 npm run dev,然后在浏览器访问localhost:8080/各个页面,你应该可以看到想要的结果。
webpack多个Html,使用webpack构建多页面应用相关推荐
- git 创建webpack项目_从 0 开始构建 webpack 项目【Webpack Book 翻译】
在开始之前,请确保你使用的是 Node 的最新版本.至少是最新的 LTS(长期支持)版本,本书的配置基于 LTS 版本所写,你的终端需要有 node 和 npm 命令,Yarn 也是一个不错的选择,也 ...
- webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别
原文地址:webpack源码阅读--npm脚本执行webpack与命令行输入webpack执行的区别 如有错误,欢迎指正! webpack是目前被大家广为使用的模块打包器.从命令行输入webpack或 ...
- webpack打包原理_对于webpack打包原理你知道有多少?
什么是 webpack ? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依 ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 【webpack】前端工程化与webpack
一.什么是前端工程化? 在现阶段的开发工作中,前端开发遵循4个现代化 模块化(js 的模块化.css 的模块化.其它资源的模块化) 组件化(复用现有的 UI 结构.样式.行为) 规范化(目录结构的划分 ...
- webpack入门(四)——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
- webpack的安装及使用webpack打包js、css文件
目录 webpack介绍 前端模块化和打包概念介绍 webpack和grunt/gulp的对比 webpack和nodejs的关系 webpack安装 webpack使用示例 环境搭建 使用webpa ...
- 【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
目录 webpack和node和npm的关系 npm install webpack -g -g是全局的意思 项目中一般有两个文件夹: src,dist(distribution) WebPack的使 ...
- webpack配置:安装了webpack和webpack-cli,但是运行webpack命令报错_
问题:安装的webpack,webpack-cli.运行webpack命令提示: One CLI for webpack must be installed. These are recommende ...
最新文章
- java版b2b2c社交电商spring cloud分布式微服务(五)springboot整合 beatlsql
- python gpu加速库比matlab快吗_为什么异步库比此I/O绑定操作的线程慢?
- hdu3338 最大流
- leetcode C++ 28. 实现 strStr() 实现 strStr() 函数。 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 need
- SpringMVC,MyBatis项目中兼容Oracle和MySql的解决方案及其项目环境搭建配置、web项目中的单元测试写法、HttpClient调用post请求等案例
- 修改用户和用户组权限
- fs7宽容度_《如果蜗牛有爱情》,FS7拍出电影级质感!
- 程序人生:给程序员的18个建议
- Python实例讲解 -- 操作数据库 附mysqldb win32 py2.7下载
- 面试官:怎么改进哈希算法实现负载均衡的扩展性和容错性?我:...
- CopyOnWriteArrayList原理
- 9款很棒的网页绘制图表JavaScript框架脚本
- 【BZOJ】【2730】【HNOI2012】矿场搭建
- STC单片机免冷启/自动下载原理DIY免冷启烧录器(纯硬件版和软件版)
- 盘点云计算的概念,分类和特点
- MFC Date Time Picker的使用
- 【转载】MIXLY二次开发(傻瓜版)
- 3dmax三点照明法场景照明的方法和技巧
- 生产仓储条码外贸管理解决方案
- Rockchip RK3588 kernel dts解析之系统休眠配置rockchip_suspend