1

我有一个使用 Vue/cli 作为前端的经典演示项目。

Runninnpm run serve运行良好，对组件的任何更改确实都是热重载的。

现在，如果我还希望mylib.js在更改时重新加载代码怎么办。

假设mylib.js是以下代码。

const XXX = window.XXX || { 
  foo: () => { alert("BAR TEST 1")},
}

window.XXX = XXX;

我称它为XXX.foo()show BAR TEST 1，然后如果我编辑BAR TEST 1到BAR TEST 2我看到更改被拾取npm run serve但XXX.foo()没有重新加载。

在 webpack 中挖掘了一下，我看到了一些关于一些hot()API 的提及。我需要写mylib.js不同的吗？（模块）。

vue.config.js

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
    publicPath: "http://0.0.0.0:8080/",
    outputDir: './dist/',
    pages: {
      main: {
        entry: 'src/main.js',
      },
      mylib: {
        entry: 'src/mylib.js',
      }
    },
    chainWebpack: config => {

        config.optimization
            .splitChunks(false)

        config
            .plugin('BundleTracker')
            .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])

        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({"Access-Control-Allow-Origin": ["\*"]})
    }
};
4

1 回答 1

0

就像拥有一样简单：

if (module.hot) {
    module.hot.accept();
    // call your js update code here
}
于 2019-07-28T09:31:28.137 回答