前言
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