文章目录
  1. 1. html-webpack-plugin插件的使用
  2. 2. webpack-dev-middleware 插件登场
  3. 3. webpack-hot-middleware 为了左手
  4. 4. 实现html模版更改自动刷新
  5. 5. 本案例测试源码下载

本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制

html-webpack-plugin插件的使用

如果没记错,上篇的时候构建完成的js文件是我们在页面用 script 标签手动引入的, 聪明的您应该马上看出问题来了,难道每次更改输出path,都要手动更新引入链接吗?如果加上 hash防止缓存,那么一串,岂不头疼欲死。有需求就有解决方案,此款插件就是用来 将依赖自动写入html文件的。

1
sudo cnpm i html-webpack-plugin --save-dev

修改配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 终于动用了配置文件里的 plugins 功能选项,已经快遗忘在角落了
plugins: [
new HtmlWebpackPlugin({
filename: '../index.html',
//渲染输出html文件名,路径相对于 output.path 的值

template: path.resolve(__dirname, './app/views/index.html'),
//渲染源模版文件

inject: true
//这个东西非常重要,true: 自动写入依赖文件; false: 不写入依赖,构建多页面非常有用
})
]

# 自动写入依赖,所以删除app/views/index.html 的script标签链接
<body>
<mountain></mountain>
</body>
# 执行命令: webpack
webpack

查看output目录,发现多了一个 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #f90;
}
h2{
text-align: center;
font-size: 30px;
padding: 10px 0;
}
</style>
</head>
<body>
<mountain></mountain>
<script type="text/javascript" src="static/app.js"></script></body>
</html>
# 上面的script就是自动写入的依赖,src路径就是 配置文件中 output.publicPath
# 终于用到了这个调试功能

用chrome 打开链接http://localhost:3000/output/index.html 可以看到一样的屎黄色结果

可能聪明的您又发现了一个问题,我们每次改动一句代码,哪怕更改一个字体大小,几像素留白,就要编译打包一次才能看到结果,有没有好烦呢?

webpack-dev-middleware 插件登场

1
sudo cnpm i webpack-dev-middleware --save-dev

此插件主要结合 express的 中间件使用,修改dev-server.js,方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var express = require("express");
var app = express();
var port = process.env.PORT || 3000;

/**
* 引入webpack 及其 配置config
*/
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
//调用配置,生成 compiler instance
var compiler = webpack(webpackConfig);

//这里是重点,使用 webpack-dev-middleware 插件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
// 注册中间件
app.use(devMiddleware);

// 使用静态资源
app.use(express.static(__dirname+'/'));

app.listen(port, function (err){
if (err) {
throw err;
}
console.log('Listening at http://localhost:' + port + '\n')
})

为了方便调试 和 理解什么叫 内存缓存,不写入硬盘,我们修改一点webpack配置

  • 修改 output.publicPath: “/“,修改为根目录
  • plugins中的filename: “index.html” ,置换到根目录
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    output: {
    path: path.resolve(__dirname, "./output/static"), //输出路径
    publicPath: '/', //调试或者 CDN 之类的域名,稍候会用到
    filename: "[name].js" //配置生成的文件名
    }

    plugins: [
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.resolve(__dirname, './app/views/index.html'),
    inject: true
    })
    ]

然后,重启服务 node dev-server.js

打来浏览器输入: http://localhost:3000/index.html
哇塞,又看到了记忆中 屎黄色 的界面,有木有很开心,打开控制台,会看到这句代码

1
<script type="text/javascript" src="/app.js"></script>

惊奇的事情发生了,我们的根目录根本没有index.html 和 app.js,这些东西哪里来的呢?
这就是我们的 伟大的中间件 webpack-dev-middleware 的功劳。

然后去mountains.vue文件中修改背景色或者其他,然后刷新浏览器就能看到效果了
有木有很赞,速度还超快哦,如图改动了背景色,只需 55ms,就是快
time

接下来就是解放我们的双手,自动实时刷新页面.

webpack-hot-middleware 为了左手

1
2
# 老套路 install
sudo cnpm i webpack-hot-middleware --save-dev

使用步骤,参照api,很简单

  • 增加插件plugins

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # 注意先行引入 webpack  
    # var webpack = require("webpack");
    plugins: [
    // Webpack 1.0
    new webpack.optimize.OccurenceOrderPlugin(),
    // Webpack 2.0 fixed this mispelling
    // new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.resolve(__dirname, './app/views/index.html'),
    inject: true
    })
    ]
  • Add ‘webpack-hot-middleware/client’ into the entry array(添加xx到入口数组)

    1
    2
    3
    4
    entry: {
    app: ['webpack-hot-middleware/client',path.resolve(__dirname, "./app/main.js")]
    }
    更好的方法是不动基本配置,稍候会在dev-server.js中 书写
  • Add webpack-hot-middleware attached to the same compiler instance

    1
    2
    # dev-server.js中 app.use(devMiddleware); 之后增加
    app.use(require("webpack-hot-middleware")(compiler));

重新启动服务 node der-server.js
然后修改一个 body 背景,切回浏览器,哇塞,自动刷新了
怀着激动的心情改了一下main.js,开心的切回浏览器哇靠靠,一切都没变化,错觉?果然手动刷新, 看到了你想看到的。
你没错,是我错了,更改上面第二部的 entry参数配置如下:

1
2
3
4
# 增加 参数reload=true
entry: {
app: ['webpack-hot-middleware/client?noInfo=true&reload=true',path.resolve(__dirname, "./app/main.js")]
}

果然重启服务,一切ok.
闲的蛋疼又去,更改了.vue文件里面的 data 数据,然后。。。。问题又来了,无热加载,控制台却能看到vue文件变化消息
查了查资料:发现这可能是vue的热加载机制和策略问题,目前我不知道怎么解决。

接下来还有一件事,那就是html模版改动的自动刷新,现在是没有这个功能的,不信你试试!

实现html模版更改自动刷新

  • 更改entry注入参数方式,从dev-server.js写入,example:
1
2
3
4
# webpack.config.js 恢复初始设置
entry: {
app: path.resolve(__dirname, "./app/main.js")
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
# dev-server.js
# 增加文件,刷新client单独文件配置,配合html reload
var express = require("express");
var app = express();
var port = process.env.PORT || 3000;

/**
* 引入webpack 及其 配置config
*/
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");

// var devClient = 'webpack-hot-middleware/client?noInfo=true&reload=true';
var devClient = './dev-client';
Object.keys(webpackConfig.entry).forEach(function (name, i) {
var extras = [devClient]
webpackConfig.entry[name] = extras.concat(webpackConfig.entry[name])
})
//调用配置
var compiler = webpack(webpackConfig);

//这里是重点,使用 webpack-dev-middleware 插件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: '/',
stats: {
colors: true,
chunks: false
}
})

var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 监听html文件改变事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// 发布事件 reload,这个事件会在dev-client.js中接受到,然后刷新
hotMiddleware.publish({ action: 'reload' })
cb()
})
})


// 注册中间件
app.use(devMiddleware);
app.use(hotMiddleware);

// 使用静态资源
app.use(express.static(__dirname+'/'));

app.listen(port, function (err){
if (err) {
throw err;
}
console.log('Listening at http://localhost:' + port + '\n')
})

dev-client.js 接受reload事件

1
2
3
4
5
6
7
8
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
// 订阅事件,当 event.action === 'reload' 时执行页面刷新
// 还记得 dev-server.js中 派发的reload事件吧
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})

重启服务,修改试试?不出意外,应该万事大吉了。
ok,至此,测试程序已经结束了。下篇讲解项目中的webpack配置.

本案例测试源码下载

文章目录
  1. 1. html-webpack-plugin插件的使用
  2. 2. webpack-dev-middleware 插件登场
  3. 3. webpack-hot-middleware 为了左手
  4. 4. 实现html模版更改自动刷新
  5. 5. 本案例测试源码下载
顶部