Внедрение css в несколько файлов html с помощью webpack 4 (и webpack-dev-server) - PullRequest
Новая
       20

Внедрение css в несколько файлов html с помощью webpack 4 (и webpack-dev-server)

0 голосов
/ 23 апреля 2020

Мои css и js вводятся в dist / index. html и dist / jobs. html в рабочем состоянии, но кажется, что css вводится в индекс. html при использовании webpack-dev-server

Я пытаюсь использовать несколько экземпляров HtmlWebpackPlugin (), как указано здесь и в 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: 

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

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Если вы не импортируете файлы css в файлы js / ts, то вам необходим CopyWebpackPlugin для копирования стилей в каталог publi c. https://webpack.js.org/plugins/copy-webpack-plugin/

1 голос
/ 24 апреля 2020

У вас есть ошибка здесь 

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'

...