Question

您好我是webpack的新手并尝试热重装工作，我没有使用React或Angular或其他任何东西只是vanilla JS，我尝试构建最简单的例子：

main.js

var {add_something} = require('./add_something');
var {state} = require('./state');

setInterval(()=>{
    state = add_something(state);
    console.log(state);
}, 1000);

add_something.js

module.exports.add_something = function(input) {
    return input + 10;
};

state.js

module.exports.state = 1;

现在当更改add_something函数添加其他内容然后10并保存时，页面重新加载正常，但它重新加载完全，意味着它再次从1开始，我想保持状态完好但只是添加更多内容热门代码重新加载后。

所以在我最初看到的控制台上：

然后我将add_something更改为100而不是控制台显示：

我希望它能说：

131
231
331

哦，在我忘记这是我的webpack.config.js文件：

var path = require('path');
module.exports = {
    entry: {
        app:'./src/main.js',
    },
    output: {
        path: __dirname,
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            { test: path.join(__dirname, 'es6'),
              loader: 'babel-loader',
              query: {
                  presets: ['es2015']
              }
            }
        ]
    }
};

我通过以下方式启动webpack：

webpack-dev-server  --hot --inline

在终端上我看到了

   [77] ./src/main.js 949 bytes {0} [built]
   [78] ./src/add_something.js 77 bytes {0} [built]
   [79] ./src/state.js 26 bytes {0} [built]

来了，这让我觉得正在构建各种块，但我不明白如何使这个简单的例子适用于实际的热重新加载。

热重装vanilla js webpack最简单的例子

0 个答案: