一,前言
webpack提供了热加载功能,使用webpack-dev-server为工程创建可访问的服务
二,webpack-dev-server热加载安装配置和使用
相关文档:
https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server
安装webpack-dev-server:
npm install [email protected] -g
npm install [email protected] --save-dev
安装完成后查看package.json
{
"name": "webpack_test",
"version": "1.0.0",
"devDependencies": {
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "3.8.1",
"webpack-dev-server": "^2.9.4"
}
}控制台执行webpack-dev-server命令:
bogon:webpack Brave$ webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /js/
Hash: 9af6a6fc36426077d208
Version: webpack 3.8.1
Time: 731ms
Asset Size Chunks Chunk Names
f849f13d4a110e9651a439f5f5051aa5.jpg 8.97 kB [emitted]
bundle.js 352 kB 0 [emitted] [big] main
[2] multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/entry.js 40 bytes {0} [built]
[3] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
[4] ./node_modules/url/url.js 23.3 kB {0} [built]
[11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[14] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[16] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[17] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[18] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[23] (webpack)/hot/emitter.js 75 bytes {0} [built]
[25] ./src/js/entry.js 487 bytes {0} [built]
[26] ./src/js/second.js 141 bytes {0} [built]
[27] ./src/data/testdata.json 44 bytes {0} [built]
[28] ./src/css/test.css 1.08 kB {0} [built]
+ 21 hidden modules
webpack: Compiled successfully.webpack-dev-server会读取webpack.config.js,在服务器中打包,编译工程
根据控制台输出,项目运行在http://localhost:8080/
发现看到的是项目文件的目录,而不是index.html
三,问题和解决
问题:
安装并启动webpack-dev-server后,访问http://localhost:8080/
发现访问到的并不是页面,而是项目文件的目录
原因1:
webpack-dev-server默认服务于根路径下index.html,
当前我们的index.html在dist/index.html下,所以没有找到,显示了项目文件目录
解决1:
在webpack.config.js中配置devServer.contentBase属性指定找该地址下的index.html,并注释掉publicPath配置项,因为publicPath对热加载有影响
const path = require('path');
module.exports = {
entry: './src/js/entry.js',
output: {
filename: 'bundle.js',
// 注释publicPath配置项
//publicPath: 'js/',
path: path.resolve(__dirname, 'dist/js/')
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
devServer: {
// 指定webpack-dev-server寻找index.html的路径
// 默认会找根目录下的index.html
contentBase: 'dist/'
}
};原因2:
webpack-dev-server读取webapck.config.js配置将项目文件读取到服务器进行打包
打包后生成的文件名和设置输出的文件名相同,都叫做bundle.js
生成的bundle.js放到了webpack-dev-server内存中,并没有输出到文件中
此时index.html文件中访问的bundle.js指向webpack-dev-server内存中bundle.js
解决2:
<script type="text/javascript" src="./js/bundle.js"></script>
// 改为
<script type="text/javascript" src="bundle.js"></script>重新打包输出代码,并启动webpack-dev-server,访问http://localhost:8080/:
页面正常显示
五,webpack-dev-server热加载测试
运行webpack-dev-server命令启动热加载
修改css文件(或js文件)并保存:
// 宽度高度由200改为500
#div2{
width: 500px;
height: 500px;
background-image: url("../image/small.jpg");
}保存后,控制台输出:
webpack: Compiling...
Hash: 763d9b6e82ef326991ae
Version: webpack 3.8.1
Time: 38ms
Asset Size Chunks Chunk Names
bundle.js 352 kB 0 [emitted] [big] main
+ 1 hidden asset
[21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[29] ./node_modules/css-loader!./src/css/test.css 524 bytes {0} [built]
+ 34 hidden modules
webpack: Compiled successfully.
同时页面显示发生变化:
热加载将项目文件打包输出到devServer内存中,
当本地文件变化并和保存时,webpack会自动打包输出文件并更新devServer
此时若删除本地文件,不会影响devServer,因为使用的是内存中的文件
六,output.publicPath对热加载的影响
在测试热加载使用中,添加了devServer.contentBase指定查找index.html的路径
由于output.publicPath会对热加载有影响,所以将其注释掉了
将output.publicPath注释打开,重新启动dev-Server,会发现页面一片空白
这是由于output.publicPath属性具有强制性
output.publicPath开启后,devServer.contentBase指定的index.html查找路径就失效了
会强制index.html从js/bundle.js中获取
修改index.html中js路径并报错:
<script type="text/javascript" src="js/bundle.js"></script>查看页面显示-此时显示正常
如果没有使用到publicPath属性就不会有这个问题,所以我们暂时还是注释掉
七,webpack-dev-server版本兼容
webpack2.x和3.x版本使用webpack-dev-server2.x和3.x版本
webpack1.x需要使用webpack-dev-server1.x版本
八,结尾
本篇介绍了webpack-dev-server热加载安装配置和使用