Dieses Mal zeige ich Ihnen, wie Webpack den Hot-Modul-Austausch implementiert. Was sind die Vorsichtsmaßnahmen für Webpack, um den Hot-Modul-Austausch zu implementieren?
Die Funktion des Hot Module Replacement (HMR) besteht darin, erforderliche Module zu ersetzen, hinzuzufügen und zu löschen, ohne die Seite zu aktualisieren, während die Anwendung ausgeführt wird. HMR ist für Anwendungen nützlich, die aus einem einzelnen Zustandsbaum bestehen. Da die Komponenten dieser Anwendungen „dumm“ (im Gegensatz zu „intelligent“) sind, kann der Status der Komponente nach Änderungen am Code der Komponente immer noch korrekt den neuesten Status der Anwendung widerspiegeln.webpack-dev-server verfügt über ein integriertes „Live-Reload“, das die Seite automatisch aktualisiert.
Das Dateiverzeichnis lautet wie folgt:
if(module.hot){
module.hot.accept(moduleId, callback);
}{
"name": "webpack-hmr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
"build": "webpack --env production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.28.0",
"nodemon": "^1.11.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}https://www.npmjs.com/package/html-webpack-plugin.
Hier werden zwei Befehle definiert, einer ist „Start“, der in der Entwicklungsumgebung verwendet wird, der andere ist „Build“, der in der Produktionsumgebung verwendet wird. --watch wird verwendet, um eine oder mehrere Dateien zu überwachen, und --exec wird von nodemon verwendet, um andere Befehle auszuführen. Informationen zur spezifischen Konfiguration finden Sie unter: https://c9.io/remy/nodemon. Der nächste Schritt ist webpack.config.js. Da in den Skripten von package.json zwei Befehle definiert sind, müssen wir noch zwei Situationen (Entwicklung und Produktion) in derKonfigurationsdatei können Sie auch die Konfiguration eines davon ändern). In Bezug auf Object.assign ist der erste Parameter das Zielobjekt. Wenn die Eigenschaften im Zielobjekt denselben Schlüssel haben, werden die Eigenschaften durch die Eigenschaften in der Quelle überschrieben. Eigenschaften späterer Quellen überschreiben ebenfalls frühere Eigenschaften. Flache Zuweisung, verwenden Sie = zum Kopieren von Objekten, d. h. const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const PATHS = {
app: path.join(dirname, 'app'),
build: path.join(dirname, 'build'),
};
const commonConfig={
entry: {
app: PATHS.app + '/index.js',
},
output: {
path: PATHS.build,
filename: '[name].js',
},
watch: true,
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo',
}),
],
}
function developmentConfig(){
const config ={
devServer:{
historyApiFallback:true, //404s fallback to ./index.html
// hotOnly:true, 使用hotOnly和hot都可以
hot: true,
stats:'errors-only', //只在发生错误时输出
// host:process.env.Host, 这里是undefined，参考的别人文章有这个
// port:process.env.PORT, 这里是undefined，参考的别人文章有这个
overlay:{ //当有编译错误或者警告的时候显示一个全屏overlay
errors:true,
warnings:true,
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // 更新组件时在控制台输出组件的路径而不是数字ID，用在开发模式
// new webpack.HashedModuleIdsPlugin(), // 用在生产模式
],
};
return Object.assign(
{},
commonConfig,
config,
{
plugins: commonConfig.plugins.concat(config.plugins),
}
);
}
module.exports = function(env){
console.log("env",env);
if(env=='development'){
return developmentConfig();
}
return commonConfig;
};Nach dem Login kopieren
Kopie. env-Parameter werden über cli übergeben.
Öffnen Sie dann die Befehlszeile für das aktuelle Verzeichnis und führen Sie npm start oder npm run build aus. Beachten Sie, dass sich Ersteres in der Entwicklungsumgebung befindet und keine Ausgabedatei (im Speicher) hat. Erst wenn Letzteres ausgeführt wird, gibt es eine Ausgabedatei.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Mint-UI-NutzungsschritteWelche Attribute muss JS haben, um festzustellen, ob es welche gibt? ist eine Bildlaufleiste auf der Seite? Sechs häufig verwendete JS-Sortieralgorithmen und VergleichDas obige ist der detaillierte Inhalt vonWie Webpack den Hot-Modul-Austausch implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
