關(guān)于webpack的配置和使用，網(wǎng)上已經(jīng)有許多文章了，大多是在講單頁(yè)應(yīng)用，當(dāng)我們需要打包多個(gè)html時(shí)，事情就變得麻煩起來(lái)。怎么在webpack-dev-server里使用路由？怎么打包多個(gè)html和js chunk并自動(dòng)更新md5？本文講的就是如何解決這些問(wèn)題。
這里假設(shè)你對(duì)Webpack已經(jīng)有最基礎(chǔ)的了解
需求
來(lái)看下我們的需求:
主要目錄結(jié)構(gòu)
├── src │ └── views # 每一個(gè)文件夾對(duì)應(yīng)一個(gè)頁(yè)面│ └── a │ └── index.js│ └── b │ └── index.js├── output # 打包輸出的目錄| └── ...└── template.html # 將根據(jù)這個(gè)模版，生成各個(gè)頁(yè)面的html└── webpack.config.js└── dev-server.js # webpack-dev-server + express
只列出了主要的目錄，這里我們根據(jù)一個(gè)template.html來(lái)生成多個(gè)頁(yè)面的html，他們之間只有引用的資源路徑不同。當(dāng)然，你也可以每個(gè)頁(yè)面單獨(dú)使用一個(gè)html模版。
Webpack 配置
這里主要解決兩個(gè)小問(wèn)題。
1. 打包多個(gè)頁(yè)面的js文件
讀取src/views下的目錄，約定每一個(gè)目錄當(dāng)成一個(gè)頁(yè)面，打包成一個(gè)js chunk。
2. 打包多個(gè)html
循環(huán)生成多個(gè)HtmlWebpackPlugin插件，把每一個(gè)插件的chunks各自指向上面打包的js chunk。
// webpack.config.jsvar glob = require('glob');var webpackConfig = { /* 一些webpack基礎(chǔ)配置 */ };// 獲取指定路徑下的入口文件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) { // 每個(gè)頁(yè)面生成一個(gè)entry，如果需要HotUpdate，在這里修改entry webpackConfig.entry[name] = entries[name]; // 每個(gè)頁(yè)面生成一個(gè)html var plugin = new HtmlWebpackPlugin({ // 生成出來(lái)的html文件名 filename: name + '.html', // 每個(gè)html的模版，這里多個(gè)頁(yè)面使用同一個(gè)模版 template: './template.html', // 自動(dòng)將引用插入html inject: true, // 每個(gè)html引用的js模塊，也可以在這里加上vendor等公用模塊 chunks: [name] }); webpackConfig.plugins.push(plugin);})路由配置
在多頁(yè)應(yīng)用下，我們希望訪問(wèn)的是localhost:8080/a，而不是localhost:8080/a.html。
由于webpack-dev-server只是將文件打包在內(nèi)存里，所以你沒法在express里直接sendfile('output/views/a.html')，因?yàn)檫@個(gè)文件實(shí)際上還不存在。還好webpack提供了一個(gè)outputFileStream，用來(lái)輸出其內(nèi)存里的文件，我們可以利用它來(lái)做路由。
注意，為了自定義路由，你可能需要引進(jìn)express或koa之類的庫(kù)，然后將webpack-dev-server作為中間件處理。
// dev-server.jsvar 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里定義下啟動(dòng)命令：
// package.json{ scripts: { "dev": "node ./dev-server.js" }}運(yùn)行 npm run dev，然后在瀏覽器訪問(wèn)localhost:8080/各個(gè)頁(yè)面，你應(yīng)該可以看到想要的結(jié)果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
