Webpack ホット モジュール交換の使用方法

今回は、webpack ホット モジュール交換の使用方法と、webpack ホット モジュール交換を使用する際の注意点について説明します。以下は実際のケースです。

ホットモジュール置換(HMR)の機能は、アプリケーションの実行中にページを更新せずに、必要なモジュールを置換、追加、削除することです。 HMR は、単一の状態ツリーで構成されるアプリケーションに役立ちます。これらのアプリケーションのコンポーネントは (「スマート」ではなく) 「ダム」であるため、コンポーネントのコードが変更された後でも、コンポーネントの状態はアプリケーションの最新の状態を正確に反映できます。

webpack-dev-server には、ページを自動的に更新する「ライブ リロード」が組み込まれています。

ファイルディレクトリは次のとおりです:

1. app

1. a.js

2. component.js

3. index.js

2. node_modules

3. パッケージ。 json

4. 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 を実行します。前者は開発環境にあり、(メモリ内に) 出力ファイルが存在しないことに注意してください。後者が実行された場合にのみ出力ファイルが存在します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

js+css を使用してタイピング効果を実現する方法

webpack ソース コード ローダー メカニズムの使用方法

以上がWebpack ホット モジュール交換の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。