Injecting css into multiple html files with webpack 4 (and webpack-dev-server)

Question

I've got my css and js being injected into dist/index.html and dist/jobs.html in production, but it only seems to inject the css into index.html when using webpack-dev-server

I'm trying to use multiple instances of HtmlWebpackPlugin() as mentioned here and in the HtmlWebpackPlugin docs

Here's my webpack.dev.js file which I'm having the problem with ("start": "webpack-dev-server --config webpack.dev.js --hot --open chrome"):

module.exports = merge(common, {
mode: "development",
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
},
module: {
    rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        } 
    ]
},  

});

and the common one:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/app.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }, 
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(png|jpeg|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash:5].[ext]',
                        outputPath: './images/'
                    }
                }
            },
            {
                test: /\.svg$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: './svg/'
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'jobs.html',
            template: 'src/jobs.html'
        }),
    ]
};

Can anyone see what I might be missing? Is there an easy way for me to check what might be going wrong? I'm pretty new with webpack. Thanks

*Edit:

Webpack output:

Version: webpack 4.42.1
Time: 3463ms
Built at: 2020-04-24 02:24:08
                          Asset      Size  Chunks             Chunk Names
images/atlassian-logo.31125.png  6.75 KiB          [emitted]
  images/dropbox-logo.7ce30.png  3.52 KiB          [emitted]
         images/legal.5f3dd.png  4.82 KiB          [emitted]
 images/logitech-logo.f75ce.png  3.67 KiB          [emitted]
                     index.html  14.7 KiB          [emitted]
                      jobs.html  1.86 KiB          [emitted]
                   js/bundle.js   684 KiB    main  [emitted]  main
            svg/spritesheet.svg  12.8 KiB          [emitted]
Entrypoint main = js/bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 (webpack)/hot/dev-server.js ./src/js/app.js 52 bytes {main} [built]
[./node_modules/core-js/modules/es.array.concat.js] 2.34 KiB {main} [built]
[./node_modules/core-js/modules/es.object.define-property.js] 403 bytes {main} [built]
[./node_modules/lodash.debounce/index.js] 10.5 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./src/js/app.js] 6.22 KiB {main} [built]
    + 159 hidden modules
Child html-webpack-plugin for "index.html":
                              Asset      Size  Chunks             Chunk Names
    images/atlassian-logo.31125.png  6.75 KiB          [emitted]
      images/dropbox-logo.7ce30.png  3.52 KiB          [emitted]
             images/legal.5f3dd.png  4.82 KiB          [emitted]
     images/logitech-logo.f75ce.png  3.67 KiB          [emitted]
     + 1 hidden asset
    Entrypoint undefined = index.html
    [./node_modules/html-loader/dist/runtime/getUrl.js] 548 bytes {0} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 16.5 KiB {0} [built]
    [./src/assets/company-logos/atlassian-logo.png] 75 bytes {0} [built]
    [./src/assets/company-logos/dropbox-logo.png] 73 bytes {0} [built]
    [./src/assets/company-logos/logitech-logo.png] 74 bytes {0} [built]
    [./src/assets/legal.png] 66 bytes {0} [built]
Child html-webpack-plugin for "jobs.html":
     1 asset
    Entrypoint undefined = jobs.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/jobs.html] 2 KiB {0} [built]
i ｢wdm｣: Compiled successfully.

For comparison here is my webpack.prod.js config which inserts the css and js into all files fine ("build": "webpack --config webpack.prod.js")

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [

        new MiniCssExtractPlugin({
            filename: '[name].[contentHash].css'
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./js/*', './svg/*', './*.css', './images/*']
        })
    ]
});

Alonad · Accepted Answer · 2020-04-23 22:03:41Z

1

You have an error here

plugins: [
    new HtmlWebpackPlugin({
        filename: './index.html',
        template: './src/index.html'
    }),
    new HtmlWebpackPlugin({
        filename: './jobs.html',
        template: './src/jobs.html'
    }),
]

Filenames should not be relative, use instead filename: 'index.html' and filename: 'jobs.html'

answered Apr 23, 2020 at 22:03

Alonad

2,27421 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NickW Over a year ago

Thanks. I changed the filenames (and template path?) but it hasn't seemed to have made any difference. The styles still aren't being injected into jobs.html

Alonad Over a year ago

Do you have any error during compilation? On my machine it works fine. I see scripts being injected into both files, and those files are in dist folder.

NickW Over a year ago

No. But now that you mention the dist folder - I'm using webpack-dev-server for development: "start": "webpack-dev-server --config webpack.dev.js --hot --open chrome". Not sure if that makes any difference, because as I mentioned above am trying to learn as I go along. No errors and it does seem to be compiling both index.html and jobs.html - and as I mentioned it injects into index.html fine. I've added the output to the post above if you don't mind having a look. Really appreciate it

Alonad Over a year ago

Add a build script into package.json "build": "webpack --config webpack.dev.js" and run it by npm run build. Dist folder will appear and you will see what is inside.

NickW Over a year ago

Heh, I've got one - I just didn't want to open a new can of worms, but you're probably right. I'll run it now and get back to you, thanks!

|

Max · Accepted Answer · 2020-04-23 22:12:36Z

1

If you dont import css files in js/ts files, then you need CopyWebpackPlugin to copy styles in public directory. https://webpack.js.org/plugins/copy-webpack-plugin/

answered Apr 23, 2020 at 22:12

Max

6801 gold badge5 silver badges15 bronze badges

1 Comment

NickW Over a year ago

Hi, yeah sorry, I do import my main.scss file in app.js. I assume that's why the injection is working in index.html. Just can't work out why that's not also happening in jobs.html

Collectives™ on Stack Overflow

Injecting css into multiple html files with webpack 4 (and webpack-dev-server)

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related