Webpack смотреть не позволяя слушать на открытом порту?

Question

Я следовал руководству по изучению wepback и его возможностей связывания и хотел найти способ автоматического обновления браузера, когда в код было внесено изменение, и обнаружил, что --watch является одним из способов сделать это.

Без каких-либо отслеживаний в файле webpack.config.json или в файле package.json сайт компилируется правильно и сообщает: «Прослушивание через порт 8080»

Когда я добавляю --watch вскрипт сборки package.json и watch / watchOptions для файла webpack.config.json Я получаю проблему, когда он просто зависает и не печатает «Listening on port 8080»

Вот мой код:

webpack.config.json

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

console.log(__dirname);
module.exports = {
  entry: {
    'bundle.js': [
      path.resolve(__dirname, 'src/client/index.js'),
    ]
  },
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  // entry: ['babel-polyfill', './src/client/index.js'],
  // output: {
  //   path: path.join(__dirname, outputDirectory),
  //   filename: 'bundle.js'
  // },

  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

  devServer: {
    port: 3000,
    open: true,
    inline: true,
    proxy: {
      '/api': 'http://localhost:8080'
    }
  },
  watch: true,
  watchOptions: {
    poll: true,
    ignored: /node_modules/
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    })
  ]
};

package.json

{
  "name": "simple-react-full-stack",
  "version": "1.0.0",
  "description": "Boilerplate to build a full stack web application using React, Node.js, Express and Webpack.",
  "main": "src/server/index.js",
  "scripts": {
    "build": "webpack --mode production --watch --colors",
    "start": "npm run build && node src/server/index.js",
    "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
    "server": "nodemon src/server/index.js",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Sandeep Raveesh",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "express": "^4.16.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.0",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "concurrently": "^4.1.0",
    "css-loader": "^2.1.1",
    "eslint": "^5.0.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "nodemon": "^1.17.3",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.1.3"
  }

Вот изображение того, что командастрока показывает мне после выполнения npm start командная строка git

Помощь очень ценится, это единственная вещь, на которой я застрял, и после этого я гладко для Node.js и React.js:)

Answer 1

Используйте webpack-hot-middleware, ссылки здесь: https://blog.cloudboost.io/live-reload-hot-module-replacement-with-webpack-middleware-d0a10a86fc80

и

https://www.npmjs.com/package/webpack-hot-middleware

Answer 2

"webpack-cli": "3.3.1",
"webpack-dev-server": "3.1.3"

попробуйте удалить символ cap и дать npm install

вам нужно запустить webpack-dev-server с флагом --hot:

webpack-dev-server --content-base ./ --port 9966 --hot

Затем вы можете получить доступ к горячей загрузке версии localhost: 9966 / webpack-dev-server /

Вам также не нужно запускать часы.

Обновление: Эта запись в конфигурации вашего веб-пакета должна измениться:

запись: ['./js/main.js'], -> запись: ['webpack / hot / dev-server', './js/main.js']

Изменить запись publicPath:

publicPath: '/ assets /'