当我更改文件中的代码时,更改不会反映在Webpack版本3.12.0生成的块中。
这是我的webpack.config
const path = require("path");
module.exports = {
entry: {
app_main: "./src/app-main.js",
serviceworker: "./src/serviceworker.js"
},
output: {
path: path.resolve(__dirname, "static/js"),
filename: "[name].bundle.js",
chunkFilename: "[name].bundle.js",
publicPath: "/static/js/"
},
devtool: "inline-source-map"
};
这是主要的js文件
const routes = [
{
uri: "/app/",
module: "app-index"
},
{
uri: "/app/list/",
module: "app-list"
}
],
mountElement = document.querySelector("main");
const loadpath = (path, elm) => {
let route = routes.find(r => r.uri === path);
// console.log("loading", route);
import(/* webpackChunkName: `${route.module}` */ `./${route.module}`).then(
mod => (mountElement.innerHTML = mod.default())
);
};
const addListener = (rootElm, sel, func) => {
rootElm.addEventListener("click", e => {
if (e.target.tagName.toLowerCase() === sel) {
func(e);
}
});
};
document.addEventListener("DOMContentLoaded", e => {
const path = location.pathname;
loadpath(path, mountElement);
addListener(document.querySelector("main"), "a", e => {
console.log(e);
history.pushState(
{},
e.target.pathname,
location.origin + e.target.pathname
);
loadpath(e.target.pathname, mountElement);
e.preventDefault();
});
});
window.onpopstate = () => {
loadpath(window.location.pathname, mountElement);
};
app-list.js文件的内容
const render = () => `<a href="/app/list/">Link 1</a>`;
export default render;
app-index.js文件的内容
const render = () => `<a href="/app/">Go to app</a>`;
export default render;
现在,如果我对
这样的app-index.js进行简单的更改,const render = () => `<a href="/app/list/">Link 2</a>`;
export default render;
我看到webpack正在承担更改,我正在工作时正在运行webpack --w,我在终端中看到了
Hash: fb486c0672ca68904ab5
Version: webpack 3.12.0
Time: 22ms
Asset Size Chunks Chunk Names
9.bundle.js 1.36 kB 9 [emitted]
+ 11 hidden assets
[9] ./src/app-index.js 262 bytes {9} [optional] [built]
[17] ./src lazy ^\.\/.*$ 160 bytes {10} [built]
+ 56 hidden modules
但是现在当我重新加载页面时,没有变化可见,输出也没有更新。在Chrome中进行强制重新加载,但没有任何反应。
我想念什么?