CODEWITHSUNDEEP
javascriptjsonwebpackwebpack-dev-serverwebpack-hmr
Ogglas
Ogglas

Reputation: 69958

webpack-dev-server and webpack -> output file to parent directory and have webpack-dev-server hot reloading still working

We have the following structure in our web application:

/src(.sln)
--/ClientSite
--/AdminSite
--/SharedWeb

In SharedWeb we have the following folders:

--/Client
--/Admin
--/Shared

We have this structure in order to have hot reloading with webpack-dev-server no matter what file we edit and only have one package.json etc. Thread about why we choose this structure if anyone is interested:

Shared react front end components -> Separate project with TypeScript -> Visual Studio 2017

Everything has worked fine so far but now that we need to deploy our solution we need to export the bundle.js to the correct site.

In webpack.client.config.js:

Works fine with hot reloading but script file is not exported to the site correctly:

output: {
    filename: "./Scripts/dist/[name].bundle.js",
},

Script file is exported correctly but hot reloading stops working:

output: {
    filename: "../ClientSite/Scripts/dist/[name].bundle.js",
},

Correct way with using path and filename according to documentation, nothing works:

output: {
    path: path.resolve(__dirname, "Scripts/dist/"),
    filename: "[name].bundle.js"
}

Script file is exported correctly but hot reloading does not work. If I use webpack with --watch and manually reload webpack-dev-server URL I can see the changes but it does not reload automatically.

output: {
    path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
    filename: "[name].bundle.js"
},

Upvotes: 2

Views: 2946

Answers (1)

Ogglas
Ogglas

Reputation: 69958

Solved it like this, publicPath was the key for automatic updates to work in webpack-dev-server.

output: {
    path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
    publicPath: '/Scripts/dist',
    filename: "[name].bundle.js"
},

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

Upvotes: 6

Related Questions