如何使用webpack構建多頁面應用

這篇文章給大家分享的是有關如何使用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/各個頁面，你應該可以看到想要的結果。

感謝各位的閱讀！關于“如何使用webpack構建多頁面應用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！