1

Я хочу создать файлы index.html и card.html, в которые будут подключаться index.js и card.js соответсвенно. Ссылка на github

Но у меня получается так, что в каждом html файле подключаются все javascript файлы, а также весь css

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="card.js"></script>

webpack.config.js:

const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const getFiles = function (dir, files_){
  files_ = files_ || [];
    var files = fs.readdirSync(dir);
    for (var i in files){
        var name = dir + '/' + files[i];
        if (fs.statSync(name).isDirectory()){
            getFiles(name, files_);
        } else {
            files_.push(name);
        }
    }
    return files_;
};

const pathSrc = path.resolve(__dirname, 'src');
const pages = getFiles(pathSrc)
  .filter((item) => path.extname(item) === '.html');


module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    index: './index/index',
    card: './card/card'
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: '[name].js',
    library: '[name]'
  },
  devServer: {
    port: 3000
  },
  plugins: [
    ...pages.map(page => {
      return new HtmlWebpackPlugin({
        template: page,
        filename: path.basename(page)
      })
    }),
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
  ]
  }
};

7
  • уберите автодобавление скриптов и стилей в файл
    – meine
    Commented 23 июн. 2020 в 13:29
  • @meine это где такое у меня? Commented 23 июн. 2020 в 13:30
  • у HtmlWebpackPlugin есть настройка: inject, по умолчанию она true, поставьте на false, самих файлах подключите то, что нужно, теперь это делается вручную
    – meine
    Commented 23 июн. 2020 в 13:32
  • скорее всего просто неправильно указаны пути до .css файла
    – meine
    Commented 23 июн. 2020 в 13:50
  • @meine благодарствую! Как раз то, чтобы начать писать код для своего приложения) Но я думал, что можно написать что-то автоматическое, типа я создаю папку index, в нём index.html, index.js, (index.css можно импортировать в js) и при компиляции оно собирается само. Может где-то можно посмотреть готовые конфиги? Commented 23 июн. 2020 в 13:54

1 ответ 1

0

В плагине HtmlWebpacjPlugin есть опция, в которой нужно указать список чанков, которые будут импортированы в html.

Вроде называется chunks.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.