1. 程式人生 > 其它 >webpack4 express中介軟體webpack-dev-middleware線上執行環境

webpack4 express中介軟體webpack-dev-middleware線上執行環境

技術標籤:webpackwebpack

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!'));