// 引入依赖模块 var express = require('express'); var webpack = require('webpack'); var config = require('./webpack.dev.config.js'); // 创建一个express实例 var app = express(); // 对网站首页的访问返回 "Hello World!" 字样 app.get('https://www.jb51.net/', function (req, res) { res.send('Hello World!'); }); // 调用webpack并把配置传递过去 var compiler = webpack(config); // 使用 webpack-dev-middleware 中间件，搭建服务器 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath, stats: { colors: true, chunks: false } }) // 使用 webpack-hot-middleware 中间件，实现热加载 var hotMiddleware = require('webpack-hot-middleware')(compiler); // 为了修改html文件也能实现热加载，使用webpack插件来监听html源文件改变事件 compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // 发布事件 hotMiddleware.publish({ action: 'reload' }); cb(); }) }); // 注册中间件 app.use(devMiddleware); app.use(hotMiddleware); // 监听 8888 端口，开启服务器 app.listen(8888, function (err) { if (err) { console.log(err); return; } console.log('Listening at :8888'); })
5.dev-client.js（配合dev-server.js监听html文件改动也能够触发自动刷新）
// 引入 webpack-hot-middleware/client var hotClient = require('webpack-hot-middleware/client'); // 订阅事件，当 event.action === 'reload' 时执行页面刷新 hotClient.subscribe(function (event) { if (event.action === 'reload') { window.location.reload(); } })
五、为了不必每次构建项目都要输入webpack --display-modules --display-chunks --config build/webpack.config.js这条长命令，我们在package.js文件中修改“scripts”项：
"scripts": { "build":"webpack --display-modules --display-chunks --config build/webpack.config.js", "dev":"node ./build/dev-server.js" }
注意：package.js中不能有注释。
这样，我们就可以通过执行 npm run build 来进行构建，同时还增加了一条开启开发服务器的命令 npm run dev。
六、网上很多人讲解webpack配置是按“先……然后……”的逻辑往下走，以及每走一步会说明走这一步的原因是什么，配完之后的结果是什么，出了问题该怎么解决，这种撰文方式确实帮了很多入门webpack的小白们（譬如我）很大的忙。所以这里我就省略了这些步骤，而是直接将最后一步的配置结果展现出来给大家看，并且附上了详细的注释（写得呕心沥血啊~）供大家理解，以后不出意外应该会出webpack构建vue的进阶篇，敬请期待~