|
|
|
步骤 2 : 安装 步骤 3 : 运行 步骤 4 : 显示页面 步骤 5 : 端口 步骤 6 : 热更新 步骤 7 : 热更新测试 步骤 8 : html 和 css 更新 步骤 9 : 可运行项目
在前面的例子里，是直接通过浏览器打开 index.html 的页面，这种情况与实际的项目是有区别的，因为实际项目通常都会是在一个服务器上打开 index.html.
webpack-dev-server 是什么呢？ 它其实就是一个微服务器，运行它，也就启动了一个 web 服务器，可以方便地从服务器上打开这个 index.html 了
因为本系列教程里， webpack 是用 cnpm 安装的 1.32.2，考虑到兼容性， webpack-dev-server 也不会安装最新版本，而是与之兼容的版本： webpack-dev-server@1.15.0。
如图所示，运行如下命令进行全局安装 cnpm install -g webpack-dev-server@1.15.0
运行如下命令：
webpack-dev-server --open 会自动打开与 http 协议关联的浏览器，并显示默认的 index.html 页面。
如图所示，会显示如下地址的访问：
http://localhost:8080/webpack-dev-server/ 因为web 服务器总会默认访问 index.html页面，所以就看到了如图所示的效果
默认访问的是8080端口，如果这个端口被占用了，那可以自定义其他端口。
修改 webpack.config.js 为如下代码。 然后重新运行 webpack-dev-derver --open 就会在如图所示的8088端口启动服务器了。 module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
devServer: {
port:8088
}
}
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
devServer: {
port:8088
}
}
webpack-dev-server 支持热更新。 所谓的热更新，即在 webpack.config.js 中的 entry 文件 ( a.js ) 发生了改变之后，会自动运行 webpack, 并且自动刷新页面，立即看到修改之后的效果。
为了做到这一点，需要修改 webpack.config.js 文件。 这个文件中导入了 webpack 模块 var webpack = require('webpack') 因为 webpack 模块是全局的，在某些情况下，通过这种方式导入不能够被识别，需要进行一次链接： npm link webpack 然后把随后把 webpack.config.js 文件的内容更新如下代码所示。 var webpack = require('webpack')
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer: {
port:8088,
inline:true,
hot:true
}
}
var webpack = require('webpack')
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer: {
port:8088,
inline:true,
hot:true
}
}
重新启动 webpack-dev-server
webpack-dev-server --open 随便改动一下 a.js 代码，会看到无需刷新 html 页面，自动看到最新的效果。
因为 webpack-dev-server 的热更新是基于 entry 入口的文件： a.js。
那么即便 html 和 css 更新了，也不会被监视到。 但是要监视 html 和 css 的更新也是可以的，请。。。。自行百度 livereload~ 站长嫌麻烦。。。就没做这个了，反正都要自己 F5 刷新一下，心里才放心~
在右上角有本知识点对应的可运行项目下载 ,实在自己搞不出来，就下载解压出来比较一下。
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||