ホットモジュール置換(HMR)の機能は、アプリケーションの実行中にページを更新せずに必要なモジュールを置換、追加、削除することです。この記事では主にWebpackのホットモジュール置換(HMR)/ホットアップデートの方法を紹介します。参考にさせていただきますのでシェアさせていただきます。
これは、ホットアップデートとも呼ばれる、Webpackホットモジュールの置き換え(Reactは必要ありません)の最も簡単な構成に関する記事です。
ホットモジュール置換 (HMR) の機能は、アプリケーションの実行中に、ページを更新せずに必要なモジュールを置換、追加、削除できることです。 HMR は、単一の状態ツリーで構成されるアプリケーションに役立ちます。これらのアプリケーションのコンポーネントは (「スマート」ではなく) 「ダム」であるため、コンポーネントのコードが変更された後でも、コンポーネントの状態はアプリケーションの最新の状態を正確に反映できます。
webpack-dev-server には、ページを自動的に更新する「ライブ リロード」が組み込まれています。
ファイルディレクトリは次のとおりです:
app
a.js
component.js
index.js
node_modules
パッケージ。 json
webpack.config.js
component.js は a.js をインポートしました。 Index.js は、component.js をインポートします。任意のファイルを変更することでホットアップデート機能を実現できます。
最も重要なことは、index.js に次のようなコードがあることです: (ホット アップデートを完了するために必要)
if(module.hot){ module.hot.accept(moduleId, callback); }
以下は package.json の構成です:
{ "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" } }
これに頼るだけです。ほら、これは本当に最も単純な構成です。このうち、nodemon は webpack.config.js ファイルの状態を監視するために使用され、変更がある限りコマンドが再実行されます。
「html-webpack-plugin」については、ここでは省略可能です。具体的な構成については、https://www.npmjs.com/package/html-webpack-plugin を参照してください。
ここでは 2 つのコマンドが定義されています。1 つは開発環境で使用される start で、もう 1 つは運用環境で使用される build です。 --watch は 1 つ以上のファイルを監視するために使用され、--exec は他のコマンドを実行するために nodemon によって使用されます。具体的な構成については、https://c9.io/remy/nodemon を参照してください。
次のステップは webpack.config.js です。package.json のスクリプトで 2 つのコマンドが定義されているため、引き続き 2 つの状況を構成ファイルに実装する必要があります (開発と運用、どちらかの構成を変更することもできます)。彼ら) 。
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; };
Object.assign に関して、最初のパラメータはターゲット オブジェクトであり、ターゲット オブジェクト内のプロパティが同じキーを持つ場合、プロパティはソース内のプロパティによって上書きされます。後のソースのプロパティも同様に、以前のプロパティをオーバーライドします。浅い代入。オブジェクトのコピー、つまり参照のコピーには = を使用します。
env パラメータは cli を通じて渡されます。
次に、コマンドラインを開いて現在のディレクトリに移動し、npm start または npm run build を実行します。前者は開発環境にあり、(メモリ内に) 出力ファイルが存在しないことに注意してください。後者が実行された場合にのみ出力ファイルが存在します。
デモのコードは次のとおりです: https://github.com/yuwanlin/webpackHMR
上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。
関連記事:
.get .post .ajax ztree とバックグラウンド サーブレット データ転送についての説明
以上がWebpack ホット モジュール交換 (HMR)/ホット アップデート方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。