Webpack не создает пакет при использовании с Webpack Dev Server

У меня есть конфигурация веб-пакета, которая генерирует пакет реагирования, когда я напрямую вызываю веб-пакет. Поскольку я хотел бы включить горячую перезагрузку, мне нужно запустить сервер разработки webpack вместе с моим экспресс-сервером разработки (обслуживающим конечные точки API), который работает на порту 3000.

webpack.dev.config.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const Jarvis = require('webpack-jarvis');
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge({}, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  output: {
    chunkFilename: '[name]-[hash].js',
    publicPath: "http://localhost:3000/build/",
    crossOriginLoading: 'anonymous'
  },
  optimization: {
    noEmitOnErrors: true,
    namedModules: true,
  },
  plugins: [
    new webpack.IgnorePlugin(/^\./locale$/, /moment$/),
    new HtmlWebpackPlugin({
      inlineSource: '.(js|css)$',
      inject: 'head',
      filename: path.join(__dirname, "/dist/index.html"),
      template: path.join(__dirname, "/public/index.html"),
      chunks: ['common', 'main']
    }),
    new Jarvis({port: 7003}),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      _DEVELOPMENT_: true,
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["es2015", "react", "stage-0"] }
        }
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["es2015", "react", "stage-0"] }
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: ["file-loader"]
      },
      {
        test: /\.svg$/,
        use: {
          loader: "svg-inline-loader"
        }
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              compilerOptions: {
                declaration: false,
                target: "es5",
                module: "commonjs"
              },
              transpileOnly: true
            }
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  entry: {
    main: [
      'babel-polyfill',
      'react-hot-loader/patch',
      'webpack/hot/only-dev-server',
      'webpack-dev-server/client?https://0.0.0.0:7001',
      './src/index.jsx',
    ],
  }
});

dev-server.js

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.dev.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  headers: {'Access-Control-Allow-Origin': '*'},
  hot: true,
  https: true,
  clientLogLevel: 'error',
  overlay: true,
  historyApiFallback: true,
  disableHostCheck: true,
  watchOptions: {
    ignored: //node_modules/.*/,
  },
  stats: {
    assets: false,
    cached: false,
    cachedAssets: false,
    children: false,
    chunks: false,
    chunkModules: false,
    chunkOrigins: false,
    colors: true,
    depth: false,
    entrypoints: true,
    excludeAssets: /app/assets/,
    hash: false,
    maxModules: 15,
    modules: false,
    performance: true,
    reasons: false,
    source: false,
    timings: true,
    version: false,
    warnings: true,
  },
}).listen(7001, '0.0.0.0', function(err, result) {
  console.info(`Serving chunks at path ${config.output.publicPath}`);
});

скрипты package.json

 "scripts": {
    "build": "webpack --config webpack.dev.config.js --progress --profile --colors",
    "start-dev": "node dev-server.js",
    "build-prod": "webpack --config webpack.prod.js --progress --profile --colors",
    "start": "node server.js"
  },

если я побегу

npm run build

В результате получается новый пакет js и html: расстояние/main.js расстояние/index.html

однако идеальная ситуация - запустить

npm run start-dev

который запустит сервер разработки, это означает, что пакеты успешно собраны, но они никогда не появляются в моей файловой системе, поэтому должна быть конфигурация вывода, которую я неправильно настроил на сервере разработки?

РЕДАКТИРОВАТЬ

Проблема оказалась такой, как описано в посте ниже. Чтобы получить доступ к перезагрузке живого пакета, я отредактировал общедоступный путь пакета с «производственного сервера» обратно только к месту сборки, а затем получил доступ к странице с сервера разработки вместо страницы, обслуживаемой «производственным сервером».

output: {
    chunkFilename: '[name]-[hash].js',
    publicPath: "/build/",
    crossOriginLoading: 'anonymous',
    path: path.join(__dirname, "/dist"),
  },
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
2 018
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сервер разработки Webpack не записывает ваши изменения на диск каждый раз, когда вы меняете исходный код. Вместо этого он наблюдает за изменением ваших файлов, обрабатывает их и обслуживает из памяти. Проверьте здесь, так как он подробно объясняет.

Спасибо, это было недоразумение, которое у меня было.

Brett 29.07.2019 05:32

Другие вопросы по теме