CODEWITHSUNDEEP
reactjswebpackwebpack-dev-server
Ash
Ash

Reputation: 258

Webpack-dev-server in sub directory - not compiling & no hot reloading

I'm trying to run webpack dev server in a sub directory (public), so that I can integrate react into an existing site.

Repo - minimal-react-webpack-starter

When I run it from a sub directory, using npm run start, neither hot reloading or compilation work, but when I run them from root without --content-base or devServer.publicPath it works fine.

Folder structure - 

|- App/
    |- node-modules/
    |- public/
        |- react/
            |- main.js
        |- index.html
    |- shared/
        |- react/
            |- components/
            |- main.js
|- package.json
|- webpack.config.js

The index.html contains <script src="react/main.js"></script>

Webpack config - 

const path = require('path');

const config = {
    entry: './shared/react/main.js',
    output: {
        publicPath: "public/react",
        path: path.resolve(__dirname, 'public/react'),
        filename: 'main.js',
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    devServer: {
            inline: true,
             publicPath: "public/",
             contentBase: path.join(__dirname, "public"),
             hot: true,
             port: 8080,
        },

}

pacakge.json - 

{
"name": "App",
"version": "1.0.0",
"repository": "Ash-repo",
"description": "App",
"devDependencies": {
  "babel-core": "^6.24.1",
  "babel-loader": "^7.0.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "path": "^0.12.7",
  "react": "^15.5.4",
  "react-dom": "^15.5.4",
  "webpack": "^2.5.0",
  "webpack-dev-server": "^2.4.5"
},
"scripts": {
  "start": "webpack-dev-server --content-base public/ --hot --progress --colors",
  "watch": "webpack --progress --colors --watch",
  "test": "echo \"Error: no test specified\" && exit 1"
}
}

Cant see why it isn't compiling or reloading, I've set up publicPath (in output and devServer) and content-base to point to public. I look at http://localhost:8080/webpack-dev-server/ and http://localhost:8080/ but no reload or compilation occurs!

Any help would be greatly appreciated! 👍

Upvotes: 2

Views: 5279

Answers (1)

Farhan Haque
Farhan Haque

Reputation: 1011

The webpack configuration seems to be incorrect. Using the below webpack config will enable hot reloading in case of sub-directory.

const path = require('path');
const config = {
    entry: './shared/react/main.js',
    output: {
        publicPath: "public/react",
        path: path.resolve(__dirname, 'public/react'),
        filename: 'main.js',
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    devServer: {
        inline: true,
        publicPath: "/react/",
        contentBase: path.join(__dirname, "public"),
        hot: true,
        port: 8070
    }
}

devServer.publicPath is the important change here. For more information about it, visit webpack's official documentation here

I hope this helps!

Upvotes: 1

Related Questions