使用webpack構建多頁面應用

原文：https://github.com/Coffcer/Blog/issues/1

關於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/各個頁面，你應該能夠看到想要的結果。