使用webpack构建多页面应用

[Coffcer]

关于webpack的配置和使用，网上已经有许多文章了，大多是在讲单页应用，当我们需要打包多个html时，事情就变得麻烦起来。怎么在webpack-dev-server里使用路由？怎么打包多个html和js并自动更新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。

2. 打包多个html

循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的js。

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

[yuanxj1024]

请问chunk这个概念如何理解？

[xiaolongyuan]

能放出一个示例demo么?

[Coffcer]

@yuanxj1024 根据我自己的理解，如果你用到webpack的按需加载，那么被按需加载的模块就是chunk，实际上也可能是打包后每一个js文件就是一个chunk，我也不太确定这个理解是否正确

[Coffcer]

@xiaolongyuan 有时间会放，Github上有一些demo，可以搜下看

[gowk]

请问，文章中的目录结构图是怎么生成的？

[Coffcer]

@gowk 我是手写的=

[imcamo]

提供个DEMO就更好了，目前我遇到的问题就是多页入口无法刷新

[xiaomeimeimei]

请问大神什么时间 写demo啊？

[Coffcer]

哈哈抱歉，这段时间都有点忙，没时间写

[LikeDege]

使用npm包connect-history-api-fallback也可以解决

[miuqiang]

来个demo，有么

[hasbug]

哥们，请问目录这种结构图手写····输入----之类的还是什么指令？

[zhuping]

@hasbug 可以试试 tree 指令

[tanhuiya]

我遇到一个问题，多入口循环添加HtmlWebpackPlugin时，每个html都会引入打包出来的所有js 以及 css，怎么解决。 @Coffcer

[nikoohp]

html文件热更新怎么解决?

[yangWare]

肯定是你没指定htmlWebpackPlugin的chunks参数，或者指定错了。正确的是数组，里面放入要添加的js。如chunks: ['app', 'manifest', 'vendor'] @tanhuiya

[MTTTM]

@Coffcer output的时候没有内容输出，怎么处理

[falseLuffy]

跑了一下，能跑通，但是遇到错误后，错误提示很不友好。能将的更具体一点吗

[TokeyJerry]

@Coffcer “1.使用webpack-dev-server做开发时的服务器”，我在这个地方还遇到个问题。DevServer 默认启动 localhost ，而我们的项目都是部署在阿里云开发服务器，例如："https://app.aaa.com"。我们访问接口一般都是 "https://app.aaa.com/api/xxx"，这样就跨域了，我们服务端并不想开放跨域，请问有可以把 DevServer 启动到 "https://app.aaa.com" 这个域名下么？

[lzxxxxx]

开发环境下页面文件也可以不生成，和资源文件一样在内存里，访问的时候路径也是和资源文件同路径就好

[TokeyJerry]

@lzxxxxx 还遇到个问题，多页应用开发中，开发环境下 html 页面是动态生成的，同样在内存中，我在利用 node 的 res.render('index') 时候路径报错，应为 index 页面是后生成的，所以这块报错了，有没有什么好的解决方法啊

[guozimo]

请问有相关demo么

[beanlee]

请问 webpack 4 中，css 拆分怎么做的呢？

[pawoma]

请问在vue-cli 创建的项目中怎么使用这种方式？

[tanxuewei]

生产环境怎么配置