webpack-dev-server在保存文件时不更新bundle
Mik*_*Sav 6 npm webpack webpack-dev-server
我正在从头开始自学webpack,webpack-dev-server当我在我的app文件中更改.js并显示更改时,我正在尝试使用实时更新浏览器.说我有以下内容package.json
{
"name": "webpack-babel",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"serve": "webpack-dev-server --hot",
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
这是我的webpack.config.json
const path = require('path');
const config = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
],
}
};
module.exports = config;
我的./app/index.js中有以下代码(这里没什么可疯狂的):
let message = 'I love socks and snacks !';
console.log(message);
当我运行npm run serve在我更改邮件app/index.js到'I love cola and snacks !!!'并保存终端并编译,但没有什么是浏览器更新.捆绑文件仍包含旧消息,并且未生成.我究竟做错了什么？我几个小时前才开始尝试这个,所以我对webpack来说有点新意.
我在我的IDE中关闭了"安全写入",我的文件结构如下:
这是我的index.html ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
*UPDATE*添加publicPath:'dist/'到output对象似乎工作......但我不确定这是否是我的问题的正确解决方案.
Mic*_*ngo 13
捆绑文件仍包含旧消息,并且未生成.
webpack-dev-server不会创建任何文件,但在命中相应路径时从内存中提供包.默认情况下这是/,因此当您尝试加载时/bundle.js,您将从内存中获取包.
但是在index.html你的要求中/dist/bundle.js.它首先找到它的唯一原因是因为你生成它并且它实际存在于你的文件系统中.要明确你是否去:
http://localhost:8080/dist/bundle.js
你从你的文件系统获得捆绑,但是当你去:
http://localhost:8080/bundle.js
你从内存中获取bundle webpack-dev-server,虽然它在你的文件系统中不存在.
正如您正确检查的那样,您可以使用该publicPath选项更改该路径.因此,设置publicPath: '/dist/'将webpack-dev-server在/dist/bundle.js命中时从内存中提供服务,无论文件系统上是否存在该文件.
设置output.publicPath也会影响一些包含资源的加载器,如html-loader的示例所示.如果您不希望出现这种影响,则可以使用devServer.publicPath来改变其行为webpack-dev-server.但正如文档中所提到的,建议它们是相同的.
小智 6
根据最新的 webpack DOC，devServer 配置应该是这样的。
devServer: {
static: './dist/',
hot: true,
devMiddleware: {
publicPath: '/dist/',
writeToDisk: true,
},
}| 归档时间： |
|
| 查看次数： |
3530 次 |
| 最近记录： |