詳解使用webpack構建多頁面應用
關于webpack的配置和使用,網(wǎng)上已經有許多文章了,大多是在講單頁應用,當我們需要打包多個html時,事情就變得麻煩起來。怎么在webpack-dev-server里使用路由?怎么打包多個html和js chunk并自動更新md5?本文講的就是如何解決這些問題。
這里假設你對Webpack已經有最基礎的了解
需求
來看下我們的需求:
- 使用webpack-dev-server做開發(fā)時的服務器
- 在webpack-dev-server里使用路由,訪問/a時候顯示a.html,/b顯示b.html
- 打包成多個html,給其中引用到資源加md5戳
主要目錄結構
├── src │ └── views # 每一個文件夾對應一個頁面 │ └── a │ └── index.js │ └── b │ └── index.js ├── output # 打包輸出的目錄 | └── ... └── template.html # 將根據(jù)這個模版,生成各個頁面的html └── webpack.config.js └── dev-server.js # webpack-dev-server + express
只列出了主要的目錄,這里我們根據(jù)一個template.html來生成多個頁面的html,他們之間只有引用的資源路徑不同。當然,你也可以每個頁面單獨使用一個html模版。
Webpack 配置
這里主要解決兩個小問題。
1. 打包多個頁面的js文件
讀取src/views下的目錄,約定每一個目錄當成一個頁面,打包成一個js chunk。
2. 打包多個html
循環(huán)生成多個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) {
// 取倒數(shù)第二層(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系列(13) This? Yes,this!
在這篇文章里,我們將討論跟執(zhí)行上下文直接相關的更多細節(jié)。討論的主題就是this關鍵字。實踐證明,這個主題很難,在不同執(zhí)行上下文中this的確定經常會發(fā)生問題2012-01-01
JavaScript使用鍵盤輸入控制實現(xiàn)數(shù)字驗證功能
根據(jù)鍵盤輸入的keycode來判斷輸入的是什么類型來實現(xiàn)數(shù)字驗證功能,就簡單幾行代碼就可以實現(xiàn),對js數(shù)字驗證功能感興趣的朋友一起看下吧2016-08-08
本文將帶大家學習異步編程這一塊內容,鑒于異步編程是js中至關重要的內容,所以我們將學習異步編程涉及到的重點和難點,同時這一塊內容也是面試??挤秶M麑Υ蠹矣兴鶐椭?/div> 2023-02-02最新評論

