Question

我想在代码编辑器中更改（保存）./src/*.js文件时刷新页面。问题是我没有在我的入口点导入这些文件（在index.js中导入），但是我用插件加入它们，所以代码在浏览器的全局范围内，而不是在模块中。

基本上我想将更长的JavaScript代码拆分成更小的文件，我不想拥有模块。

我尝试了很多配置，最接近我需要的是下面的内容，除了它不刷新浏览器，（它重新编译）。

如何在浏览器的globalscope（或一个模块中的所有代码）中实现JavaScript的重新编译和刷新？

webpack.config.js：

[HttpPut(), Route("/ExchangeRate/{exchkey}")]
public HttpResponseMessage PutCurrencyExchange(string exchkey, [FromBody()] JObject jsonData)
 {...

npm start：

const path = require('path');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
const FileWatcherPlugin = require("file-watcher-webpack-plugin");

module.exports = {
context: __dirname,
entry: { bundle: './src/index.js' },
output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [{
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    }]
},
plugins: [
    new MergeIntoSingleFilePlugin({
        files: {
            "app.js": [
                path.resolve(__dirname, './src/setup.js'),
                path.resolve(__dirname, './src/buttons.js'),
                path.resolve(__dirname, './src/circle.js'),
                path.resolve(__dirname, './src/wall.js')
            ]
        }
    }),
    new FileWatcherPlugin({
        root: __dirname,
        files: ['*.js']
    })
],
devServer: {
    contentBase: './dist',
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    hot: true,
    inline: true,
    // publicPath: "./src",
    watchOptions: {
        ignored: './node_modules/'
    }
}
};

和setup.js，buttons.js等是常规的JS脚本文件，而不是导出的类。

任何想法都赞赏！

Webpack - 浏览器刷新文件更改而不是模块

0 个答案: