使用 webpack 4（和 webpack-dev-server）将 css 注入到多个 html 文件中

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/*']
        })
    ]
});

Answer 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'

Answer 2

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/