webpack4 express中介軟體webpack-dev-middleware線上執行環境
阿新 • • 發佈:2021-02-19
1、下載 cnpm install webpack-dev-middleware -D 2、配置 const webpack = require('webpack'); const middleware = require('webpack-dev-middleware'); const config = require('../webpack.config'); 配置webpack const compiler = webpack(config); const express = require('express'); const app = express(); app.use( middleware(compiler, { // webpack-dev-middleware options }) ); app.listen(3000, () => console.log('Example app listening on port 3000!')); 3、若報錯Can't resolve 入口檔案的錯誤 在webpack配置中新增上下文環境 module.exports = { context:path.resolve(__dirname), }
程式碼示例:
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const config = require('../webpack.config');
const compiler = webpack(config);
const express = require('express');
const app = express();
app.use(
middleware(compiler, {
// webpack-dev-middleware options
})
);
app.get('/us', (req, res) => {
res.json({ name: 'jeff' });
})
app.listen(3000, () => console.log('Example app listening on port 3000!'));