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

1 ответ 1

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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