पग + एक्सप्रेस में परिवर्तनों का पता लगाने के लिए वेबपैक हॉट रीलोड कैसे प्राप्त करें?

Question

मेरे पास पग और स्टाइलस के साथ एक एक्सप्रेस ऐप है। मैंने एचएमआर मिडलवेयर को कॉन्फ़िगर किया है और यह स्टाइलस परिवर्तनों पर पुनः लोड होता है लेकिन पग परिवर्तनों के लिए नहीं।

मुझे आश्चर्य है कि क्या मुझे एक विशिष्ट कॉन्फ़िगरेशन गुम है। मैंने pug-html-loader जोड़ने का भी प्रयास किया लेकिन यह भी काम नहीं करता था। https://webpack.js.org/loaders/raw-loader/

Webpack 3 config:

module: { 
    rules: [ 
     { 
     test: /\.pug$/, 
     use: [ 
      {loader: 'raw-loader'}, 
      {loader: 'pug-html-loader'} 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    // Templates HTML 
    new HtmlWebpackPlugin({ 
     filename: 'index.html', 
     template: './src/templates/index.pug' 
    }), 
    new HtmlWebpackPlugin({ 
     filename: 'contact.html', 
     template: './src/templates/contact.pug' 
    }), 
    new webpack.NamedModulesPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
    ] 

// server.js 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'pug'); 

const webpackDevMiddleware = require('./hmr').dev; 
const webpackHotMiddleware = require('./hmr').hot; 
app.use(webpackDevMiddleware); 
app.use(webpackHotMiddleware); 

---

// hmr.js 
const webpackDevMiddleware = require('webpack-dev-middleware'); 
const webpackHotMiddleware = require('webpack-hot-middleware'); 

const webpack = require('webpack'); 
const webpackConfig = require('./webpack.config.js'); 
const compiler = webpack(webpackConfig); 

exports.dev = webpackDevMiddleware(compiler, { 
    noInfo: true, 
    filename: webpackConfig.output.filename, 
    publicPath: webpackConfig.output.publicPath, 
    stats: { 
    colors: true 
    } 
}); 

exports.hot = webpackHotMiddleware(compiler, { 
    log: console.log, 
    path: '/__webpack_hmr', 
    heartbeat: 10000 
}); 

---

// webpack.config.js 
const javascriptRule = { 
    test: /\.js$/, 
    use: [ 
    { 
     loader: 'babel-loader', 
     options: { 
     presets: ['env'] 
     } 
    } 
    ] 
}; 

const stylesRule = { 
    test: /\.styl$/, 
    use: ['style-loader', 'css-loader', 'stylus-loader'] 
}; 

module.exports = { 
    context: path.join(__dirname, 'javascripts'), 
    entry: [ 
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 
    './index.js' 
    ], 
    devtool: 'source-map', 
    output: { 
    path: path.join(__dirname, 'public', 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/dist/', 
    library: 'aux' 
    }, 

    module: { 
    rules: [javascriptRule, stylesRule] 
    }, 

    plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()] 
} 

Answer 1

आप कच्चे-लोडर स्थापित की जरूरत है 10 app.js

// import all template pug 

import 'raw-loader!./templates/index.pug' 
import 'raw-loader!./templates/contact.pug' 
... 

webpack बनाता है यही कारण है कि बन्दर फ़ाइलों में परिवर्तन सुनने, लेकिन यह भी इस bundle.js करने के लिए कोड जे एस, तो आप app.js bundle.js साफ करने के लिए प्रक्रिया पूरी की जा कहते हैं।