Горячая перезагрузка Webpack 4 не работает с React TypeScript - PullRequest
Новая
       18

Горячая перезагрузка Webpack 4 не работает с React TypeScript

1 голос
/ 25 мая 2019

Я настраиваю приложение React, используя Typescript, используя пользовательскую конфигурацию Webpack, но у меня проблема с горячей перезагрузкой.

Изменения отображаются только при перезапуске приложения.

Я искал ответыи примеры, но я не смог найти решение, которое помогло бы мне.

Ниже приведены мой код и конфигурация.

package.json 

{
  "name": "frontend-bootstrap-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development  --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "eslint": "^5.16.0",
    "html-webpack-plugin": "^3.2.0",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.2",
    "typescript": "^3.4.5",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1"
  },
  "dependencies": {
    "@types/react": "^16.8.18",
    "@types/react-dom": "^16.8.4",
    "@typescript-eslint/parser": "^1.9.0",
    "eslint-plugin-react": "^7.13.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "ts-loader": "^6.0.1"
  }
}

webpack.config.json 

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

module.exports = {
  entry: ["./application/src/index.tsx"],
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  output: {
    path: path.join(__dirname, './application/dist'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './application/src/index.html'
    })
  ]
};

App.tsx 

import * as React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to React with Typescript</h1>
      </div>
    );
  }
}

export default App;

Это то, что я получаю в консоли: enter image description here

РЕДАКТИРОВАТЬ (РЕШЕНО):

Мой код выше работает.Я нашел опечатку в моем файле index.tsx.

Это было: import App from './components/App';

вместо: import App from './Components/App';

Спасибо за помощь, ребята!

Ответы [ 2 ]

1 голос
/ 25 мая 2019

Для решения этой проблемы вам нужно использовать devServer .

В вашем случае добавьте это в конфигурацию вашего веб-пакета: 

 devServer: {
    contentBase: path.join(__dirname, './application/dist'),
    compress: true,
    port: 9000
  }
0 голосов
/ 25 мая 2019

Убедитесь, что в разделах плагинов есть HotModuleReplacementPlugin, например 

const webpack = require('webpack');

plugins: [
new HtmlWebpackPlugin({
  template: './application/src/index.html'
 }),
 new webpack.HotModuleReplacementPlugin()
],

Чтобы исправить проблему с горячей перезагрузкой, задайте для базы контента свой исходный каталог и включите встроенный режим 

webpack-dev-server --inline
...