Dieses Mal werde ich die Schritte zum Erstellen einer mehrseitigen Anwendung mit Webpack analysieren. Was sind die Vorsichtsmaßnahmen für die Erstellung einer mehrseitigen Anwendung mit Webpack? Schauen Sie mal rein.
Es gibt viele Artikel im Internet über die Konfiguration und Verwendung von Webpack, in denen es meist um Single-Page-Anwendungen geht. Wenn wir mehrere HTML-Dateien verpacken müssen, wird es problematisch. Wie verwende ich Routing im Webpack-Dev-Server? So packen Sie mehrere HTML- und JS-Dateien chunk und MD5 automatisch aktualisieren? In diesem Artikel geht es darum, wie diese Probleme gelöst werden können.
Hier wird davon ausgegangen, dass Sie bereits über die grundlegendsten Kenntnisse von Webpack verfügen
Nachfrage
Werfen wir einen Blick auf unsere Bedürfnisse:
Verwenden Sie den Webpack-Dev-Server als Entwicklungsserver
├── src │ └── views # 每一个文件夹对应一个页面 │ └── a │ └── index.js │ └── b │ └── index.js ├── output # 打包输出的目录 | └── ... └── template.html # 将根据这个模版，生成各个页面的html └── webpack.config.js └── dev-server.js # webpack-dev-server + express
Webpack-Konfiguration
Hier gilt es zwei Hauptprobleme zu lösen.1. JS-Dateien für mehrere Seiten packen
Lesen Sie die Verzeichnisse unter src/views, stimmen Sie zu, dass jedes Verzeichnis als Seite behandelt und in einen js-Block gepackt wird.2. Packen Sie mehrere HTML-Dateien
Generieren Sie mehrere HtmlWebpackPlugin-Plug-Ins in einer Schleife und verweisen Sie die Blöcke jedes Plug-Ins auf den oben gepackten js-Block.
// 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);
})Routing-Konfiguration
In einer mehrseitigen Anwendung möchten wir auf localhost:8080/a statt auf localhost:8080/a.html zugreifen. Da webpack-dev-server nur Dateien im Speicher verpackt, können Sie file('output/views/a.html') nicht direkt in Express senden, da die Datei noch nicht tatsächlich existiert. Glücklicherweise bietet Webpack einen OutputFileStream zum Ausgeben von Dateien in seinem Speicher. Wir können ihn zum Routing verwenden. Beachten Sie, dass Sie zumRouting definieren selbst möglicherweise eine Bibliothek wie Express oder Koa einführen und dann webpack-dev-server als Middleware verarbeiten müssen.
// 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
{
scripts: {
"dev": "node ./dev-server.js"
}
} aus und besuchen Sie dann die Seite „localhost:8080/each“ im Browser. Sie sollten die gewünschten Ergebnisse sehen können.
npm run dev Ich glaube, dass Sie die Methode zum Lesen dieses Artikels beherrschen. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Ajax ändert direkt den Status und löscht den nicht aktualisierten StatusWohin führt dieser Punkt wann? vue verwendet AxiosDetaillierte Erläuterung der Verwendung der Multithread-Laufzeitbibliothek Nexus.js von JSDas obige ist der detaillierte Inhalt vonAnalyse der Schritte zum Erstellen mehrseitiger Anwendungen mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
