Webpack5 +react刷新-webpack插件不工作

Question

我想自己用webpack、babel和typescript来安装webpack，因为我想知道更多，并且有一个一致的开发样板。

我一直试图在react中设置快速刷新和热重加载，并在反应刷新-webpack插件文档之后添加“`webpack5 5”。我没有取得任何进展，并决定做一个最小的例子，复制错误。

我的期望是，我应该能够对我的源文件夹进行更改，并且应该立即出现，或者至少在刷新时出现。到目前为止，这两种情况都不会发生。

我确保尽我所能地遵循初级自述 for react-refresh-webpack-plugin。我会再看一遍，看看我能根据它做些什么改变，并在这里报告。

到目前为止，文件树如下所示：

├── babel.config.js
├── package-lock.json
├── package.json
├── src
│   ├── app.tsx
│   ├── index.html
│   └── index.tsx
├── tsconfig.json
└── webpack.config.js

我的webpack配置

// webpack.config.js

const path = require( 'path' )
const ReactRefreshPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' )
const HTMLWebpackPlugin = require( 'html-webpack-plugin' )


// Ingredients
// Just to make things less ugly

const SRC = path.join( __dirname, 'src' )
const NODE_MODULES = /node_modules/
const MODE = 'development'
const INDEX = path.join( SRC, 'index.html' )
const ENTRY_POINT =  path.join( SRC, 'index.tsx' )


// Objects nested within exports.
// Also to make things less ugly.
const PLUGINS = [
    new ReactRefreshPlugin(),
    new HTMLWebpackPlugin({ 
        template : INDEX,
        filname : './index.html'
    })
]
const RESOLVE = { extensions : [
    '.ts',
    '.js',
    '.tsx',
    '.jsx'
]}
const RULES = [
    // Babel
    {
        test : /\.tsx?$/,
        exclude : NODE_MODULES,
        include : SRC,
        use : 'babel-loader'
    }
]


// Prettier exports.
module.exports = ( env ) => {
    const config = {
        mode : MODE,
        entry : ENTRY_POINT,
        module : {
            rules : RULES
        },
        plugins : PLUGINS,
        resolve : RESOLVE
    }
    console.log( JSON.stringify( config, null, space = "\n" ) )
    return config
}

和我的babel配置

// babel.config.js

// Variables
const PRODUCTION = 'production'  

// Methods 
const PRESETS = ( api ) => [
    '@babel/preset-env',
    '@babel/preset-typescript',
    [
        '@babel/preset-react',
        {
            development : !api.env( PRODUCTION ),
            runtime : 'automatic'
        }
    ]
]

const PLUGINS = ( api ) => [
    api.env( PRODUCTION ) && 'react-refresh/babel'
].filter( Boolean )


module.exports = ( api ) => {

    api.cache.using(
        () => process.env.NODE_ENV
    )

    return {
        presets : PRESETS( api ),
        plugins : PLUGINS( api )
    }


}

package.json

{
  "name": "typescript-react-with-refresh",
  "version": "1.0.0",
  "description": "Trying to get hot reloading working with webpack5.",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "react-refresh": "^0.11.0",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

最后，类型记录编译器的配置：

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "dist",
    "target": "ESNext",
    "sourceMap": true
  },
  "include": ["src"]
}

最后，如果需要index.html或任何其他源文件，我可以提供这些文件。就目前而言，我并没有提供他们来保持这篇文章的简短。提前感谢您的帮助！

更新

我发现我应该将ts-node和type-fest安装为dev依赖项，并将webpack.config.js更改为webpack.config.ts。尽管如此，问题依然存在。

Answer 1

弄明白了。原来，在react-refresh-webpack-plugin page页面上也有类似的问题，请参阅page #334。我的部分解决方案是重新启动，因为我决定我不喜欢格式化。问题在于react的外化。特别是，修正是将以下修改添加到文件下面的optimization和entry部分，并将它们合并在一起：

const path = require('path');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const SRC = path.join( __dirname, '..', 'src' )
const DIST = path.join(__dirname, '..', 'dist')
const PUBLIC = path.join( __dirname, '..', 'public' )

module.exports = (env) => {

  return {

    mode: 'development',
    entry: {
      reactRefreshSetup: '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
      main: path.join( SRC, 'index.tsx' ),
    },

    output: {
      filename: '[name].js',
      path: DIST,
    },

    module: {
      rules: [
        {
          test: /\.tsx?$/,
          include: SRC,
          use: 'babel-loader',
        },
        {
          test : /\.css$/,
          use : [
            'style-loader',
            'css-loader'
          ]
        },
      ],
    },

    plugins: [
      new HtmlWebpackPlugin({
        filename: './index.html',
        template: path.join( PUBLIC, 'index.html' ),
      }),
    ],

    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx' ],
    },

  }

}

其余的

module.exports = ( env ) => {

  return {

    devServer: {
      hot: true,
      port: 8080,
    },

    plugins : [
      new ReactRefreshPlugin()
    ],

    optimization: {
      runtimeChunk: 'single',
      // Ensure `react-refresh/runtime` is hoisted and shared
      // Could be replicated via a vendors chunk
      splitChunks: {
        chunks: 'all',
        name(_, __, cacheGroupKey) {
          return cacheGroupKey;
        },
      },
    }

  }

}

Answer 2

这是一个有效的例子：

devServer: {
  hot: true,
  open: true,
  port: 7777,
  static: {
    directory: path.resolve(pRoot, 'public', 'assets'),
    publicPath: '/public/assets/',
  },
},

这里的关键是删除这两个字段，因为它们的工作由HMR插件来处理：

devServer: {
  watchFiles: ['src', 'public'],
  historyApiFallback: true,
  // ...
}