Webpack热加载-webpack-dev-server
一,前言
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/
访问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: