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

Question

我已经在生产环境中将我的css和js注入到dist / index.html和dist / jobs.html中，但是使用webpack-dev-server时似乎只将css注入到index.html中

我正在尝试使用here和HtmlWebpackPlugin docs中提到的HtmlWebpackPlugin（）的多个实例

这是我的webpack.dev.js文件，我在（"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']
        } 
    ]
},  

});

和常见的一个：

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

谁能看到我可能会想念的东西吗？我有一种简单的方法可以检查出什么问题了吗？我对webpack很陌生。谢谢

*编辑：

Webpack输出：

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.

为了进行比较，这是我的webpack.prod.js配置，它将css和js插入到所有文件中都很好（"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

这里有错误

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

文件名不应该是相对的，请改用filename: 'index.html'和filename: 'jobs.html'

Answer 2

如果不将css文件导入js / ts文件，则需要CopyWebpackPlugin才能在公共目录中复制样式。https://webpack.js.org/plugins/copy-webpack-plugin/