如何獲取webpack熱重載以檢測pug + express中的更改？

我有一個與帕格和手寫筆快遞應用程序。我配置了HMR中間件，它重新加載了觸控筆更改，但不更改帕格。如何獲取webpack熱重載以檢測pug + express中的更改？

我想知道是否缺少特定配置。我也嘗試添加pug-html-loader，但那也沒用。

// 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()] 
}

來源

2017-10-20 nachocab

帕格只是要在webpack中轉換成Javascript，因此它不能自動加載自己，與style-loader不同，它已經內置了支持HMR更新的功能。爲了讓你的Pug文件兼容HMR，你需要使用'if（module.hot）{module.hot.accept（'等等。React是另一個支持HMR的插件，因爲Pug只是一個模板引擎而不是類/對象組件您將必須自己處理HMR。請參閱此處的手動處理HMR的示例 - > https://webpack.js.org/guides/hot-module-replacement/ – Keith

您需要安裝原始裝載機：https://webpack.js.org/loaders/raw-loader/

的WebPack 3配置：

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() 
    ]

個app.js

// import all template pug 

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

這使得的WebPack聽的哈巴狗文件的變化，但同時也增加了這個js代碼到bundle.js，那麼你需要處理app.js清潔bundle.js。

來源

2017-11-23 10:35:59 Pascut

如何獲取webpack熱重載以檢測pug + express中的更改？

回答

相關問題