У меня на шаге HTML and CSS imports не создается ./dist/style.css

Дефолтное название должно быть webpack.config.js . Как он должен угадать какой из тех трёх конфигов кушать? 🙂 поэтому надо добавить параметр --config

а как тогда запускали до этого?

В package.json должен быть объект scripts, например, yarn dev или npm run prod

"scripts": {
   "build": "webpack --config webpack.prod.js",
   "lint": "eslint --cache --ext .js,.jsx src/",
   "develop": "cross-env NODE_ENV=development node src/server/server.js",
   "start": "cross-env NODE_ENV=production node src/server/server.js"
 },

Поздравляю 🙂 перед каждым скриптом нужно добавить yarn или npm run по вкусу. Предварительно нужно установить зависимости командой yarn install или npm install

то есть когда нажимаешь npm start в этой папке он сам пакует?

?

Нет

Что тебе нужно то? Собрать или запустить поковырять?

собрать потом запустить

Дружище, я хз что за приложение. Скрипты запускаются через yarn и npm. Дальше сам, пожалуйста, ибо чатик про webpack

Всем привет! Помогите, пожалуйста, с настройкой file-loader

/* eslint-disable */
const path = require('path')
const webpack = require('webpack')
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    app: './index.jsx',
  },
  context: path.resolve(__dirname, 'src'),
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: 'app.js',
    publicPath: '/public/dist/'
  },
  // mode: 'development',
  watch: process.argv[process.argv.length - 1] === 'development',
  devtool: 'cheap-inline-module-source-map',
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: [
            ["@babel/plugin-proposal-class-properties", { "loose": true }]
          ]
        },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      // {
      //   test: /\.css$/,
      //   use: [ 'MiniCssExtractPlugin.loader' ]
      // },
      // {
      //   test: /\.scss$/,
      //   use: [
      //     'style-loader',
      //     MiniCssExtractPlugin.loader,
      //     {
      //       loader: 'css-loader',
      //       options: { sourceMap: true }
      //     }, {
      //       loader: 'sass-loader',
      //       options: { sourceMap: true }
      //     }
      //   ]
      // },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(jpg|JPG|jpeg|png|gif|mp3|svg|ttf|woff2|woff|eot)$/gi,
        // test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '/assets/images/[name].[ext]',
        }
        // use: [
          // {
            // loader: 'file-loader',
            // loader: 'file-loader?name=app/assets/images/[name].[ext]',
          // },
        // ],
      },
    ],
  },
  // plugins: [
  //   new MiniCssExtractPlugin({
  //     filename: '[name].css',
  //   })
  // ],
  // For import without .jsx
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    historyApiFallback: {
      index: './public/index.html'
    },
    port: 8082,
  },
}

Почему я получаю ошибку в браузере?

Ребята , вы уже имеете опыт, что именно собирает вебпак? Я вот посмотрел видосы и вроде процесс такой: создаем html css js, затем через вебпак все это превращается в  какой-та замес, микс чего угодна. Ну и после этого мы спокойно удаляем прежде созданные html css js так как у нас теперь есть каша от вебпака.
Кто-нить моет помочь понять, что произошло?

Получается JS файл, в котором собран весь JS плюс, возможно, какие-то html/css внутри js, плюс, возможно, какие-то html/css/картинки снаружи js отдельными файлами, в зависимости от лоадеров и вообще конфига и импортов (с конвертациями/транспиляциями, если надо). Грубо говоря, вы сами определяете, что там конкретно у вас в итоге получится.

Самая главная фишка вебпака - соединить тыщу мелких js-файлов в один. Все остальное (html, css, картинки) это уже приятная побочка.

Он берет файлы и прогоняет через, так сказать, свои заводы, как будто это сборка автомобиля: он ищет файлы по тому что ты ему даёшь, проверяет их расширения и отправляет на нужные, выделенные заводы, в резуальтате с конвейера получается готовые файлы, разметки, стилей, скриптов. Он берет то что ты дал, не трогая входные файлы, обрабатывает на этих заводах их и выдает тебе нужное, в том формате как ты попросил(с минификацией, всякими оптимищациями и тд), там где ты попросил. Иногда это делает за ширмой, загрузив всё в память, если не ошибаюсь или куда то в то временную папку, если есть дев сервер.