Question

每次更新.js或.scss文件时，我的webpack-dev-server都会重新加载页面。但仅适用于webpack发出的原始index.html文件。

我需要将style.css和bundle.js放到目标页面，然后查看更新的更改，但要放上：

<link rel="stylesheet" href="http://192.168.178.81:8080/main.css">
<script src="http://192.168.178.81:8080/bundle.js"></script>

可以很好地在页面上加载这些文件，但是该站点上没有实时重新加载。

我的webpack.config.js：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");
module.exports = {
entry: "./src/js/index.js",
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/"
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
        }
    ]
},
plugins: [
    new HtmlWebPackPlugin({
        template: './src/index.html'
    }),

    new MiniCssExtractPlugin({
        filename: "[name].css"
    })
],
watch: true
};

这就是我启动Webpack的方式：

 webpack-dev-server --mode development --open --hot --host 192.168.178.81

我知道这可能是在其他项目上以这种方式对我起作用的原因，但是现在我创建了一个新项目，由于某种原因而无法使它工作。

编辑：所以看起来好像是“相同来源策略”问题，因为在浏览器控制台中出现“ WDS断开连接”错误。 Sockjs节点似乎有问题。但是为什么要加载其他源，而不加载sock.js？

Webpack仅在其自己的webpack-dev-server主机上重新加载页面，而不在包含bundle.js的任何主机上重新加载页面

0 个答案: