Настройка webpack?

Question

[Alex_87]

Здравствуйте! Имеется файл webpack, взятый у Владилена Минина. Пытаюсь его настроить под себя, убрав(как мне кажется) всё лишнее. Уже удалены такие модули, как:

"devDependencies": {

"@babel/preset-react": "^7.8.3",
"@babel/preset-typescript": "^7.8.3",
"csv-loader": "^3.0.2",
"node-sass": "^4.13.0",
"papaparse": "^5.1.1",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.2",
"webpack-bundle-analyzer": "^3.6.0",
"xml-loader": "^1.2.1"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}

но какие-то ещё модули возможно остались. Лично я стараюсь свести всё к минимальным настройкам, без которых невозможен ни один проект. То есть модули, которые нужны везде. Я прошу помочь почистить по возможности package.json и webpack.config и настроить сборку dist так, чтобы при сборке в нём был файл index.html, папка с файлами js, папка с файлами css, и папка с изображениями(а может как раз эта папка лишняя и эту папку нужно создавать самому, без обработки с папки src. Как вы думаете) и всё. Просто та структура, которая сейчас появляется в папке dist мне не понятна. К тому же, появляются какие-то файлы vendors, которые мне не нужны. Не знаю, что это такое... Прошу помочь!

Ссылка на папку: https://dropmefiles.com/Svkwp

Answer 1

[Сергей delphinpro]

Начиная с версии 4 webpack придерживается принципа zero config. Вы просто создаете папку src, в ней файл main.js и запускаете вебпак. С этого и начинайте. Потом добавляйте нужные именно вам лоадеры и плагины. Просто смотрит е документацию и делайте как написано. У вебпака очень хорошая дока.

Answer 2

[approximate solution]

Большинтсво того, что вы удалили - критично для проекта. Не надо лезть в вебпак, если не понимаете что удаляете.
Советую посмотреть данный курс что бы получить хотя бы небольшое понимание как вебпак работает под капотом - https://coursehunter.net/course/webpack.

Лезть туда не понимая как работают массивы, объекты и не умея гуглить - бессмысленно. Как по мне, вы слишком рано пришли к вебпаку. Для начала надо подтянуть себя хотя бы до знания нативного JS.

Comments

[Alex_87]

я обладаю знаниями нативного js. Конечно, не вашего уровня, но объекты от массива я отличаю. И что критического я удалил? Я без этих модулей спокойно работал и раньше. Давайте взглянем на них по внимательнее.
react": "^16.12.0", "react-dom": "^16.12.0" "@babel/preset-react": "^7.8.3", - я не пользуюсь данным фреймворком
"sass-loader": "^8.0.2", "node-sass": "^4.13.0", - я less использую
"optimize-css-assets-webpack-plugin": "^5.0.3", - я не удалял. По ошибке записал сюда

"csv-loader": "^3.0.2","papaparse": "^5.1.1","terser-webpack-plugin": "^2.3.2","webpack-bundle-analyzer": "^3.6.0","xml-loader": "^1.2.1" - мне вообще не понятны. Что-то пытался гуглить, но информацию не нашёл

P.S. Курс на который вы ссылаетесь опубликован более 4-х лет назад и это явно не webpack 4 и я не уверен что 3) А разница между версиями, насколько я понял, колосальная