Webpack 4, конфигурирующий точки входа и выходы (папка dist создается в каждой папке проекта)

Question

Дело в том, что главная папка 'Projects' и там установлены все файлы webpack 4 с конфигами.Внутри папки «Projects» находится много папок, таких как 'Project1', 'Project2', etc.... Я хочу начать с 'node_modules' точки входа, где webpack.config.js, и настроить там дополнительные точки входа, такие как ./Project1/js/app.jsx, выходные данные, такие как ./Project1/dist/js/main.js, такие же, как scss и index..html, все сгенерировано в папке 'dist'.Дело в том, что в основной папке 'Projects' всегда должен быть установлен только один раз node_modules.

---

package.json:

{
  "name": "webpack4_example",
  "version": "1.0.0",
  "main": "index.js",
  "browserslist": ["last 2 versions"],
  "scripts": {
    "build": "webpack --mode production",
    "watch": "webpack --watch --mode development",
    "start": "webpack-dev-server --open --mode development"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "sass-loader": "^7.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

---

webpack.config.js:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './Project1/js/app.jsx',                // customized entry point
  output: { 
    path: path.resolve(__dirname, 'dist'),  
    filename: './js/out.js'                     // generated ./Project1/dist/js/out.js
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          { 
            loader: 'html-loader',
            options: { minimize: true } 
          }
        ]
      },
      {
        test: /\.(png|jpe?g)/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: './img/[name].[ext]',
              limit: 10000
            }
          },
          {
            loader: 'img-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './Project1/index.html',     // not sure how to set these sections
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

---

.babelrc:

{
  "presets": ["env", "react", "stage-2"]
}

---

Из того, что я понимаю без настройкиТочки входа webpack по умолчанию будут искать 'Projects/src/...' для всех файлов, таких как scss, js, img, index.html, index.js, чтобы работать с ними, и сгенерирует папку 'Projects/dist' со всеми сгенерированными файлами.

Приведенная выше форма конфигурации компилируется без ошибок, но нигде не генерирует папку 'dist', поэтому я не уверен, что процесс компиляции все равно выполняется правильно.

Буду признателен за любые предложения и решения

Answer 1

РЕШЕНИЕ (обновлено: добавлены рабочие файлы просмотра): хорошо, мне удалось заставить его работать (отправная точка - где установлены node_modules и другие файлы конфигурации webpack4, здесь, в Projectsосновная папка)

Projects
   |__Project1
   |         |__js
   |         |   |__app.jsx
   |         |__dist       //desirable result, generated dist folder
   |         |     |__*     //all generated folders/files html, js, css, img
   |         |__index.ejs  //renamed from index.html
   |
   |__Project2  //etc, project folders
   |
   |__src // if without customized entry points it's default source
   |    |__folders like /_scss, /img, /js
   |    |__index.js
   |    |__index.ejs   //renamed index.html, used when no customized
   |                   //entry points are set, same as for all /src
   |
   |__node_modules
   |__.babelrc
   |__package.json
   |__webpack.config.js

.babelrc без изменений и такой же, как указано выше в предыдущем посте

в этом примере в Projects обычно создается папка src папка свсе файлы / папки для передачи через webpack4, в файле /src/index.js должен присутствовать, он предназначен для импорта некоторых других файлов

пример index.js

import style from "./_scss/main.scss";    //paths for Projects/src/...
import style from "./main.css";

package.json

{
  "name": "webpack4_example",
  "version": "1.0.0",
  "main": "index.js",            // the file explained just above
  "browserslist": ["last 2 versions"],
  "scripts": {
    "dev": "webpack --mode development ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
    "build": "webpack --mode production ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
    "watch": "webpack --watch --mode development",
    "start": "webpack-dev-server --mode development --open --watch-content-base ./Project1/js/app.jsx"  //watching desired files changes live in browser
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "sass-loader": "^7.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

, где --mode production | developement | none означает оптимизацию форматирования для выходных файлов в папке dist или ни одной из таких оптимизаций, для удобства чтения используйте none

webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js$|jsx$)/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          { 
            loader: 'html-loader',
            options: { minimize: true } 
          }
        ]
      },
      {
        test: /\.(png|jpe?g)/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: './img/[name].[ext]',
              limit: 10000
            }
          },
          {
            loader: 'img-loader'
          }
        ]
      },
      {
        test: /\.(css$|scss$)/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './Project1/index.ejs',     // entry point for html
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  watchOptions: {                   //added to make possible watch files
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000
  }
};

настроенная точка входа для index.html, где расширение .html изменено на .ejs, как для решения некоторых проблем, вызванных между html-loader и html-webpack-plugin,С помощью .ejs выходной html, который также автоматически помещается в папку dist, не оптимизирован для форматирования и доступен для чтения.Будьте внимательны, если html.ejs содержит тег с закрепленным путем для файла [out] .js (здесь тот, который сгенерирован в папке dist).Сгенерированный файл index.html из папки dist добавит еще одну такую ​​строку, поэтому она будет удвоена -> строка для удаления.

для использования при запуске: npm run build , npm start