保存文件时 webpack-dev-server 不更新包 [英] webpack-dev-server not updating bundle when saving file
问题描述
我从头开始自学 webpack，当我更改应用程序文件中的 .js 并显示更改时，我尝试使用 webpack-dev-server 实时更新浏览器.假设我有以下 package.json
I'm teaching myself webpack from scratch and I am trying to use the webpack-dev-server to live update the browser when I change a .js in my app file and show the changes. Say I have the following 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
and this is my 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 中有以下代码(这里没有什么疯狂的):
I have the following code in my ./app/index.js (nothing crazy here):
let message = 'I love socks and snacks !';
console.log(message);
当我运行 npm run serve 时，将 app/index.js 中的信息更改为 'I love cola and splashs !!!' 并保存终端确实编译但浏览器中没有任何更新.捆绑文件仍包含旧消息并且不会生成.我究竟做错了什么?我几个小时前才开始尝试这个，所以我是 webpack 的新手.
When I run npm run serve change the message in my app/index.js to 'I love cola and snacks !!!' and save the terminal does compile but nothing is updated in the browser. The bundle file still contains the old message and isn't being generated. What am I doing wrong? I only started trying this a few hours ago so I am a bit of a newbi with webpack.
我在 IDE 中关闭了安全写入"，我的文件结构如下:
I have turned off "safe write' in my IDE and my file structure is like so:
这是我的 index.html...
this is my 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 对象似乎有效......但我不确定这是否是我问题的正确解决方案.
* UPDATE * adding publicPath: 'dist/' to the output object seems to work... but I am unsure if this is the correct solution to my problem.
推荐答案
捆绑文件仍包含旧消息且未生成.
The bundle file still contains the old message and isn't being generated.
webpack-dev-server 不创建任何文件，而是在命中相应路径时从内存中提供包.默认情况下，这是 /，因此当您尝试加载 /bundle.js 时，您将从内存中获取包.
webpack-dev-server does not create any file, but serves the bundle from memory when the according path is hit. By default this is /, so when you try to load /bundle.js, you will get bundle from memory.
但是在您的 index.html 中，您请求 /dist/bundle.js.它首先可以找到它的唯一原因是因为您生成了它并且它实际上存在于您的文件系统中.如果你去:
But in your index.html you request /dist/bundle.js. The only reason it can find it in the first place, is because you generated it and it's actually present on your file system. To be clear if you go to:
http://localhost:8080/dist/bundle.js
你从你的文件系统中得到了这个包，但是当你去:
you get the bundle from your file system, but when you go to:
http://localhost:8080/bundle.js
您通过 webpack-dev-server 从内存中获取包，尽管它不存在于您的文件系统中.
you get the bundle from memory by webpack-dev-server, although it doesn't exist on your file system.
正如您正确检查的那样，您可以使用 publicPath 选项更改该路径.因此，设置 publicPath: '/dist/' 将使 webpack-dev-server 在 /dist/bundle.js 为命中，无论该文件是否存在于您的文件系统中.
As you've correctly examined, you can change that path with the publicPath option. So setting publicPath: '/dist/' will make webpack-dev-server serve the bundle from memory when /dist/bundle.js is hit, regardless of whether that file exists on your file system.
设置 output.publicPath 也会影响一些包含资产的加载器，如在 html-loader 示例 中可见.如果你不想要这种效果，你可以使用 devServer.publicPath 相反，只改变 webpack-dev-server 的行为.但正如文档中提到的，建议它们相同.
Setting output.publicPath also affects some loaders that include assets, as seen in the example of html-loader. If you don't desire that effect, you can use devServer.publicPath instead, to only change the behaviour of webpack-dev-server. But as mentioned in the docs, it's recommended for them to be the same.
这篇关于保存文件时 webpack-dev-server 不更新包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
