0

У меня вопрос моё приложение имеет такую структуру введите сюда описание изображения если задеплоить то всё нормально,но стоит мне переместить index.html и он мне в браузере выведет текущую директорию с папками и файлами. И возникает вопрос как webpack ищет index.html и почему именно его. В конфиге вроде нигде не указывается. Вот конфиг

const path = require('path');

module.exports = {

    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
};
Обновленный конфиг
const path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path : path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                    }
                ]
            }
        ]
    }
}

1 ответ 1

1

В файле index.html указывается путь до файла bundle.js. Если использовать html-webpack-plugin этот файл будет создаваться автоматически с добавлением всех путей к css и js файлам.


Дополнительно, рабочий конфиг:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
};
13
  • Значит он привязан только по bundle.js ? И там его запускает правильно?
    – Alex Park
    11 июн 2018 в 9:49
  • Да, тэг <script src="/путь_до_bundle.js/bundle.js"></script>, обычно в конце html-файла или в начале с параметром defer. 11 июн 2018 в 10:20
  • А если я захочу переместить index.html,уже нужно использовать плагин html-webpack-plugin ?
    – Alex Park
    11 июн 2018 в 10:27
  • Нет, помещайте куда захотите, только добавьте в html файл тэг <script> с правильным путём до Вашего bundle.js файла. 11 июн 2018 в 12:10
  • так, значит,что-то не так,путь правильный в тэге. Но если переместить напрмер в "src", то отображается в браузере директория корневая, а там если выбрать папку "src",то откроется index.html
    – Alex Park
    11 июн 2018 в 12:13

Ваш ответ

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

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