vue2.0+webpack环境的构造过程(3)

重启服务，修改 Favlist.vue 中的背景色，再次查看浏览器，发现可以热加载。到这里还没结束，这里只是监听到Favlist.vue文件的改动，为了能监听到index.html文件的改动，我们还需要做一些工作。

第一步：在dev-server.js文件中监听html文件改变事件，修改后的dev-server.js文件如下：

// 引入必要的模块 var express = require('express') var webpack = require('webpack') var config = require('./webpack.dev.conf') // 创建一个express实例 var app = express() // 调用webpack并把配置传递过去 var compiler = webpack(config) // 使用 webpack-dev-middleware 中间件 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath, stats: { colors: true, chunks: false } }) var hotMiddleware = require('webpack-hot-middleware')(compiler) // 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') })

第二步：修改webpack.dev.conf.js文件

var HtmlWebpackPlugin = require('html-webpack-plugin') var path = require('path'); var webpack = require('webpack'); // 引入基本配置 var config = require('./webpack.config'); config.output.publicPath = 'https://www.jb51.net/'; config.plugins = [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ filename: 'app/index/index.html', template: path.resolve(__dirname, '../app/index/index.html'), inject: true }) ]; // 动态向入口配置中注入 webpack-hot-middleware/client // var devClient = 'webpack-hot-middleware/client'; var devClient = './build/dev-client'; Object.keys(config.entry).forEach(function (name, i) { var extras = [devClient] config.entry[name] = extras.concat(config.entry[name]) }) module.exports = config;

文件中修改了devClient变量，将 ‘webpack-hot-middleware/client' 替换成 ‘./build/dev-client'，最终会导致，我们入口配置会变成下面这样：

entry: { index: [ './build/dev-client', path.resolve(__dirname, '../app/index/index.js') ] },

第三步：新建build/dev-client.js文件，并编辑如下内容：

var hotClient = require('webpack-hot-middleware/client') // 订阅事件，当 event.action === 'reload' 时执行页面刷新 hotClient.subscribe(function (event) { if (event.action === 'reload') { window.location.reload() } })

这里我们除了引入 ‘webpack-hot-middleware/client' 之外订阅了一个事件，当 event.action === ‘reload' 时触发，而在 dev-server.js 中有发布的事件：

// webpack插件，监听html文件改变事件 compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // 发布事件 hotMiddleware.publish({ action: 'reload' }) cb() }) })

这样，当我们的html文件改变后，就可以监听的到，最终会执行页面刷新，而不需要我们手动刷新。看下效果：

至此，开发环境终于搞定了。

以上所述是小编给大家介绍的vue2.0+webpack环境的构造过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: