webpack
हॉट मॉड्यूल रिप्लेसमेंट

टिप्पणियों

webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false

वेबपैक-देव-मिडलवेयर के साथ उपयोग करें

1. Npm के माध्यम से webpack-dev-Middleware स्थापित करें

   npm i -D webpack-dev-middleware webpack-hot-middleware
   

2. Webpack.config.js को संशोधित करें

   • "entry" में परिभाषित प्रत्येक आइटम में webpack-hot-middleware/client जोड़ें

   • जोड़ें new webpack.HotModuleReplacementPlugin() करने के लिए "plugins"

     module.exports = {
         entry: {
             js: [
                 './index.js',
                 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
             ]
         },
         plugins: [
             new webpack.HotModuleReplacementPlugin()
         ]
     };
     

3. इन्हें index.js में जोड़ें

   var webpack = require('webpack');
   var webpackDevMiddleware = require('webpack-dev-middleware');
   var webpackHotMiddleware = require('webpack-hot-middleware');
   
   var config = require('./webpack.config.js');
   var compiler = webpack(config);
   
   app.use(webpackDevMiddleware(compiler, {
       noInfo: true,
       publicPath: config.output.publicPath,
       stats: { colors: true },
       watchOptions: {
           aggregateTimeout: 300,
           poll: true
       },
   }));
   
   app.use(webpackHotMiddleware(compiler, {
       log: console.log,
   }));
   

मॉड्यूल के लिए HMR सक्षम करें

मॉड्यूल को हॉट मॉड्यूल रिप्लेसमेंट (HMR) के लिए योग्य बनाने के लिए, इस तरह से मॉड्यूल के अंदर मॉड्यूल module.hot.accept() को जोड़ना सबसे सरल तरीका है:

// ...

if(module.hot) {
    module.hot.accept(); // This will make current module replaceable
}

वेबपैक-देव-सर्वर के साथ प्रयोग करें

1. Npm के माध्यम से वेबपैक-देव-सर्वर स्थापित करें।

   npm i -D webpack-dev-server
   

2. Server.js जोड़कर webpack-dev-server dev- webpack-dev-server को कॉन्फ़िगर webpack-dev-server ।

   // server.js
   
   var webpack = require("webpack");
   var WebpackDevServer = require("webpack-dev-server");
   var config = require("./webpack.dev.config");
   
   var server = new WebpackDevServer(webpack(config), {
       // ...
   });
   
   server.listen(8080);
   

3. Webpack.config.js को संशोधित करें

   • "entry" में परिभाषित प्रत्येक आइटम में webpack-dev-server/client जोड़ें।

   • "entry" में परिभाषित प्रत्येक आइटम में webpack/hot/only-dev-server जोड़ें।

     • नोट: यदि आवश्यक हो तो बदलें ...
     • यदि HMR विफल रहता है तो पेज रिफ्रेश को ब्लॉक करने के लिए webpack/hot/only-dev-server का उपयोग करें।
     • यदि HMR विफल रहता है तो ऑटो-रिफ्रेश पृष्ठ पर webpack/hot/dev-server का उपयोग करें।

   • जोड़ें new webpack.HotModuleReplacementPlugin() करने के लिए "plugins"

     module.exports = {
         entry: {
             js: [
                 'webpack-dev-server/client?http://localhost:8080'
                 'webpack/hot/only-dev-server',
                 './index.js'
             ]
         },
         plugins: [
             new webpack.HotModuleReplacementPlugin()
         ]
     };
     

4. hot: true जोड़ें hot: true webpack-dev-server कॉन्फ़िगरेशन में hot: true है

   var server = new WebpackDevServer(webpack(config), {
       hot: true
   
       // ... other configs
   });