Oh no, I’ve been working on a Webpack5 + React +typescript project for a few days, and I’m running into a few hicks.

Last Update at 2021-07-30

Set the pit

  • Hot update failure
  • Route redirection
  • Using the import
  • File path alias

Hot update failure

First of all, I’m using webPack version 5+, so hot updates need to be set to hot: true in devServer

  1. When hot: true is enabled and inline: true is enabled, hot updates will not be triggered and the page will not move if any file changes are detected.

  2. Hot update failed after using vendor!! This TND is ridiculous (entry object, entry file configuration)

    The role of vendor: dependent third-party libraries, vendor defined in the package into vendor.js, own packaged into the corresponding chunksCopy the code

  3. Browserslist in package.json! However! Also! Can be! In order to! Let! Update invalid (baidu to)

The webPack devServer configuration for the development environment is as follows

DevServer: {// update historyApiFallback: true, // Display entry file contentBase: Path. join(__dirname, './dist'), open: true, noInfo: true, hot: true, quiet: true, // Avoid unnecessary information printed in console port: 8082, // port number // inline: true, // refresh in real time // liveReload: false, // reload/refresh page // publicPath: '/', // publicPath where packaged resources can be accessed},Copy the code

Route redirection

Hot updates to webPack refresh the page, and then it redirects the route!! My god, every time I update, I come back to /welcome. After looking for it for a long time, I realize that turning the redirection off means refreshing the original page. Giao!

I won’t paste the code, it’s too low.

** Use import **

Import XX from ‘./XX’, import XX from ‘./XX’, import XX from ‘./XX [‘.tsx’, ‘.ts’, ‘.js’, ‘.jsx’] extensions: [‘.tsx’, ‘.ts’, ‘.jsx’]

Specific code

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

Path alias

So this is interesting, quick introduction of modules, very simple, not obvious

The following code

resolve:{
    alias: {
      '@': path.resolve('src')
    },
    extensions: [ '.tsx', '.ts', '.js', '.jsx' ]
  }
Copy the code