這次帶給大家webpack建構多頁面應用的步驟分析,webpack建構多頁面應用的注意事項有哪些,下面就是實戰案例,一起來看一下。
關於webpack的設定和使用,網路上已經有許多文章了,大多是在講單頁應用,當我們需要打包多個html時,事情就變得麻煩起來。怎麼在webpack-dev-server裡使用路由?怎麼打包多個html和js chunk並自動更新md5?本文講的就是如何解決這些問題。
這裡假設你對Webpack已經有最基礎的了解
需求
來看我們的需求:
使用webpack-dev-server做開發時的伺服器
主要目錄結構
├── 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/各個頁面,你應該可以看到你想要的結果。
##相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是webpack建立多頁面應用程式的步驟分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!