Search code examples
filewebpackoutputhtml-webpack-plugin

Webpack html output location


I have webpack configured as below

const webdirectory = "../Application/Web"
plugins: [
                new HtmlWebpackPlugin({
                    inject: "body",
                    filename: `${webdirectory}/Views/Health/Index.cshtml`,
                    template: `${webdirectory}/Views/Health/Index_Template.cshtml`,
                    minify: false
                }),

output: {
                // assets served by webpack-dev-server
                path: path.resolve(__dirname, "IGNOREdevjunk/"),
                publicPath: "https://localhost:8080/"
              },

I want webpack to generate the cshtml in the same folder as where it grabbed the template from. But what webpack does it grabs the template from the correct location, but when it saves the cshtml it completely messes up the output directory. What it is doing is grabbing the 'path' variable VALUE, which is 'Client' in this case , and then creating the cshtml in Client/IGNOREdevjunk/Application/Web/Views/Health/Index.cshtml

How do I make it save the cshtml in the same folder as the template? When saving it is ignoring the relative paths.

Directory structure

Parent
 - Application
 - - Web
 - - - Views
 - - - - Health
 - - - - - Index_template.cshtml
 - - - - - Index.cshtml (THIS IS WHERE I WANT THE CSHTML TO BE EMITTED)
 - Client
 - webpack.config.js
 - - IGNOREdevjunk
 - - - Application
 - - - - Web
 - - - - - Views
 - - - - - - Health
  - - - -  - - Index.cshtml (I DON'T WANT THIS SAVED HERE)

Solution

  • The below worked for me

    I had to change the filename as below

    const webdirectory = "../Application/Web"
    plugins: [
                    new HtmlWebpackPlugin({
                        inject: "body",
                        filename: path.join(__dirname, "../Application/Web/Views/Health/Index.cshtml"),
                        template: `${webdirectory}/Views/Health/Index_Template.cshtml`,
                        minify: false
                    }),
    
    output: {
                    // assets served by webpack-dev-server
                    path: path.resolve(__dirname, "IGNOREdevjunk/"),
                    publicPath: "https://localhost:8080/"
                  },