webpack配置打包js，jsx，ESLint插件、TypeScript、TSX

前言

webpack版本：

"webpack": "5.23.0",
"webpack-cli": "4.5.0"

 

webpack输入代码支持IE

因为webapck5已经不兼容IE了，如果我们需要在5中兼容IE则需要另行配置。

在项目中创建.browserslistrc文件：

[production]
> 1%
ie 9

[modern]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

文件内容的意思是，最低需要支持ie9，支持一个最新的chrome版本和一个最新的firefox版本，ssr是在node上使用的配置。webpack在打包的时候会自动读取这个配置文件，并按配置文件操作。

IE并不能完全支持，因为IE上面没有Promise类。

 

用babel-loader打包JS

webpack.config.js

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env']
            ]
          }
        }
      }
    ]
  }
}

 

用babel-loader打包JSX

webpack.config.js

options: {
  presets: [
    ['@babel/preset-env'],
    ['@babel/preset-react'] // 通过preset-react 支持jsx
  ]
}

 

webpack配置ESLint插件

在项目中创建.eslintrc.js文件

module.exports = {
  extends: ['react-app'],
  rules: {
    'react/jsx-uses-react': [2], // [0]：忽略，[1]：警告，[2]：报错
    // 提示要在 JSX 文件里手动引入 React
    'react/react-in-jsx-scope': [2]
  }
}

 [0]：忽略，[1]：警告，[2]：报错

webpack.config.js 

const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  mode: 'production',
  plugins: [new ESLintPlugin({
    extensions: ['.js', '.jsx'] // 不加 .jsx 就不会检查 jsx 文件了
  })],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react', {runtime: 'classic'}]
            ]
          }
        }
      }
    ]
  }
}

 

用babel-loader打包TS

webpack.config.js 

module: {
  rules: [
    {
      test: /\.[jt]sx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env'],
            ['@babel/preset-react', {runtime: 'classic'}],
            ['@babel/preset-typescript'] // 加上这一句
          ]
        }
      }
    }
  ]
}

因为TSLint的作者发表声明，不再维护TSLint，所以我们转用ESLint的babel，preset-typescript。 

 

让ESLint支持TypeScript

.eslintrc.js

module.exports = {
  extends: ['react-app'],
  rules: {
    'react/jsx-uses-react': [2],
    // 提示要在 JSX 文件里手动引入 React
    'react/react-in-jsx-scope': [2]
},
  overrides: [{
    files: ['*.ts', '*.tsx'],
    parserOptions: {
      project: './tsconfig.json',
    },
    extends: ['airbnb-typescript'],
    rules: {
      '@typescript-eslint/object-curly-spacing': [0],
      'import/prefer-default-export': [0],
    }
  }]
}

webpack.config.js

plugins: [new ESLintPlugin({
    extensions: ['.js', '.jsx', '.ts', '.tsx'] // 不加 .jsx 就不会检查 jsx 文件了
  })],

 

用babel-loader打包TSX

通过 tsc --init 初始化 tsconfig.json 文件

然后修改tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5", 
    "module": "commonjs", 
    "jsx": "react", 
    /* Strict Type-Checking Options */
    "strict": false,  
    "noImplicitAny": true,
    "esModuleInterop": true, 
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true 
  }
}

 

让JS和TS支持@alias

JS 支持@alias

webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin')
const path = require('path')

module.exports = {
  mode: 'production',
  plugins: [new ESLintPlugin({
    extensions: ['.js', '.jsx', '.ts', '.tsx'] // 不加 .jsx 就不会检查 jsx 文件了
  })],
  // 加下面这一段配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/')
    }
  },
  ...
}

添加后，既可以在文件中使用@代替相对路径。

import {xxx} from '@/xxx' // 直接引入

TS 支持@alias

.eslintrc.js

rules: {
    'react/jsx-uses-react': [2],
    // 提示要在 JSX 文件里手动引入 React
    'react/react-in-jsx-scope': [2],
    'no-console': [0]
  },
  overrides: [{
    files: ['*.ts', '*.tsx'],
    parserOptions: {
      project: './tsconfig.json',
    },
    extends: ['airbnb-typescript'],
    rules: {
      '@typescript-eslint/object-curly-spacing': [0],
      'import/prefer-default-export': [0],
      'no-console': [0],
      'import/extensions':[0]
    }
  }]
}

tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    ...
}

 

webpack配置完整代码：https://github.com/A-Tione/webpack-config-1