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

关于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/各个页面,你应该可以看到想要的结果。

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

(0)

相关推荐

  • 详解webpack 多页面/入口支持&公共组件单独打包

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • 详解基于webpack2.x的vue2.x的多页面站点

    本文介绍了基于webpack2.x的vue2.x的多页面站点,分享给大家,具体如下: vue的多页面 依旧使用vue-cli来初始化我们的项目 然后修改主要目录结构如下: ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── we

  • webpack多页面开发实践

    写在前面 webpack是一款模块加载器兼打包工具,能把js,css,页面,图片,视频等各种资源,进行模块化处理.而现在网上流传很多单页面的webpack模型,那多页面呢?比较少,现在我提供一个多页面的前端模型.希望大家适合使用. 在最开始接触webpack的时候,我都觉得webpack只适用于单页面应用,比如webpack+react,webpack+vue.我自己在使用webpack+vue构建项目及开发的过程中感受到了webpack的强大和方便.基于实际项目需求,我在想,多页面站点是否也能

  • webpack构建react多页面应用详解

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

  • 详解vue-cli + webpack 多页面实例应用

    关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vue-cli Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需一分钟即可启动带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 疑问 vue-cli主要是用于构建单页应用的脚手架,但

  • 详解vue-cli + webpack 多页面实例配置优化方法

    本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

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

    关于webpack的配置和使用,网上已经有许多文章了,大多是在讲单页应用,当我们需要打包多个html时,事情就变得麻烦起来.怎么在webpack-dev-server里使用路由?怎么打包多个html和js chunk并自动更新md5?本文讲的就是如何解决这些问题. 这里假设你对Webpack已经有最基础的了解 需求 来看下我们的需求: 使用webpack-dev-server做开发时的服务器 在webpack-dev-server里使用路由,访问/a时候显示a.html,/b显示b.html 打

  • 详解通用webpack多页面自动导入方案

    目录 前言 思考 安装glob 创建工具类 getEntry getHtmlWebpackPlugin 二次封装 应用 前言 在之前,我写了一个webpack的模板.在平时我写栗子或者是写几个页面的时候会用到它.当这个模板需要多个页面时需要手动到webpack.config.ts文件中配置entry和HtmlWebpackPlugin,有点麻烦. 思考 我们项目中的页面都是存放在src/pages/*.html中的,我们可以搜索这里文件夹下的html文件我们可以利用node中的glob包中的.s

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解用Docker构建MySQL主从环境

    前言 本篇文章记录我使用 docker-compose 以及 dockerfile 来构建基于 binlog 的 MySQL 主从环境.如果你严格按照文中的步骤进行配置,相信很快就可以搭建好一个基础的 MySQL 主从环境. 介绍 MySQL 主从同步分为 3 个步骤: master 节点将数据的更新记录写到 binary log 中. slave 节点开启 IO 线程连接 master 节点,请求获取指定 binary log 文件的指定位置之后的日志. master 节点的 binary l

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

    使用webpack搭建单页面程序十分常见,但在实际开发中我们可能还会有开发多页面程序的需求,因此我研究了一下如何使用webpack搭建多页面程序. 原理 将每个页面所在的文件夹都看作是一个单独的单页面程序目录,配置多个entry以及html-webpack-plugin即可实现多页面打包. 下面为本项目目录结构 . ├─ src │ └─ pages │ ├─ about │ │ ├─ index.css │ │ ├─ index.html │ │ └─ index.js │ └─ index

  • 详解前端任务构建利器Gulp.js使用指南

    概述 在软件开发中,任务运行器的好处是不言而喻的.它们可以帮助自动运行常见的冗长的任务,让你可以专注于更重要的事情中,比如敲出很棒的代码.说的严肃点,自动运行一些比如图片压缩.代码压缩.单元测试以及更多的任务的技能,简直就是节省时间的利器. 对于很多前端开发者而言,时下使用最多的任务管理器就是Grunt了,一个可以让你在Gruntfile.js文件中使用JavaScript定义各种运行任务的工具.基本上,只要你了解JavaScript,创建一个Grunt任务是非常简单直接的事情.丰富的第三方插件

  • 详解Vue-cli webpack移动端自动化构建rem问题

    相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题: 1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用 2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助 1 安装v

  • 详解spring cloud构建微服务架构的网关(API GateWay)

    前言 在我们前面的博客中讲到,当服务A需要调用服务B的时候,只需要从Eureka中获取B服务的注册实例,然后使用Feign来调用B的服务,使用Ribbon来实现负载均衡,但是,当我们同时向客户端暴漏多个服务的时候,客户端怎么调用我们暴漏的服务了,如果我们还想加入安全认证,权限控制,过滤器以及动态路由等特性了,那么就需要使用Zuul来实现API GateWay了,下面,我们先来看下Zuul怎么使用. 一.加入Zuul的依赖 <dependency> <groupId>org.spri

随机推荐