My webpack-dev-server reloads the page everytime I update .js or .scss file. But only on the original index.html file emited by webpack.

I need to put my style.css and bundle.js to my target page, and then see the updated changes, but putting:

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

loads nicely those files on page, but no live reloads happen on that site.

My 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
};

And this is how I start my webpack:

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

I know this is possible cause on other project it is working for me this way, but now I've created new one and for some reason can not get this working.

EDIT: So it looks like it's somehow "same origin policy" problem, as I get "WDS Disconnected" error in browser's console. Sockjs-node seems to having problem with that. But why other sources are loaded, and sock.js not?

0 Answers