Jak uzyskać ponowne ładowanie pakietu internetowego w celu wykrycia zmian w mopsie + ekspresie?

Question

Mam aplikację Express z mopsami i rysikiem. Skonfigurowałem oprogramowanie pośredniczące HMR i przeładowuje się na zmiany trzpienia, ale nie na zmiany mopsów.

Zastanawiam się, czy brakuje mi konkretnej konfiguracji. Próbowałem też dodać pug-html-loader, ale to też nie działa.

// 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

Musisz zainstalować raw-ładowarka: 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() 
    ] 

app.js

// import all template pug 

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

To sprawia WebPack słuchać zmian w plikach Mops, ale również dodaje ten kod js do bundle.js, następnie trzeba przetwarzać app.js aby wyczyścić bundle.js.