如何获取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中的更改？

回答

相关问题