Webpack 4 - вывод не создает bundle.js в правильном месте

Question

Я недавно обновился с Webpack 3 до 4.

Вот мой файл webpack.dev.js:

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'public/bundle.js'
    },

Ожидаемое поведение

Это должно быть создание моего bundle.js в папке public.

Фактическое поведение

Это создает файл main.js в папке с именем dist

Вывод

По какой-то причине вывод больше не работает так, как должен.

Вопрос

Как мне генерировать имя файла?

Вот скрипт, который я запускаю:

"scripts": {
    "watch": "./node_modules/.bin/webpack --mode development --watch --progress",
},

Answer 1

За документ :

Из готового веб-пакета вам не понадобится файл конфигурации, он будет предполагать, что точка входа вашего проекта src/ index и выдаст результат в dist / main.js , минимизированном и оптимизированном для производства.

Обычно ваши проекты должны расширять эту функциональность, для этого вы можете создать webpack.config.js файл в корневой папке, и веб-пакет будет автоматически использовать его.

Итак, ваш файл называется webpack.dev.js , поэтомуон автоматически не выбирается веб-пакетом.Вам необходимо указать его в вашем скрипте часов.

"scripts": {
  "watch": "./node_modules/.bin/webpack --mode development --watch --progress --config webpack.dev.js",
},

Вы можете упростить ваш скрипт часов, изменив ваши настройки следующим образом:

// package.json
"scripts": {
  "watch": "webpack --progress --config webpack.dev.js",
},

// webpack.dev.js
const path = require('path');
module.exports = {
    watch: true,
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
};