详解使用webpack构建多页面应用


Posted in Javascript onDecember 21, 2017

关于webpack的配置和使用,网上已经有许多文章了,大多是在讲单页应用,当我们需要打包多个html时,事情就变得麻烦起来。怎么在webpack-dev-server里使用路由?怎么打包多个html和js chunk并自动更新md5?本文讲的就是如何解决这些问题。

这里假设你对Webpack已经有最基础的了解

需求

来看下我们的需求:

  1. 使用webpack-dev-server做开发时的服务器
  2. 在webpack-dev-server里使用路由,访问/a时候显示a.html,/b显示b.html
  3. 打包成多个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/各个页面,你应该可以看到想要的结果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门之基本函数详解
Oct 21 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 #Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
原生js+cookie实现购物车功能的方法分析
Dec 21 #Javascript
JS实现去除数组中重复json的方法示例
Dec 21 #Javascript
解析vue中的$mount
Dec 21 #Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 #Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 #Javascript
You might like
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python3 实现调用串口功能
2019/12/26 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python文件及目录操作代码汇总
2020/07/08 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
人事科岗位职责范本
2014/03/02 职场文书
高中军训感想300字
2014/03/04 职场文书
优秀公益广告词大全
2014/03/19 职场文书
生产操作工岗位职责
2014/09/16 职场文书
民事二审代理词
2015/05/25 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android