（十八）配置alias别名

步骤十八

优化构建速度-配置alias别名

webpack支持设置别名alias,设置别名可以让后续引用的地方减少路径的复杂度。

1. 修改webpack.base.js

module.export = {
  // ...
   resolve: {
    // ...
    alias: {
      '@': path.join(__dirname, '../src')
    }
  }
}

2. 修改tsconfig.json,添加baseUrl和paths

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

配置修改完成后,在项目中使用 @/xxx.xx,就会指向项目中src/xxx.xx,在js/ts文件和css文件中都可以用。

3. src/App.tsx可以修改为

import smallImg from '@/assets/images/2021logo.svg'
import bigImg from '@/assets/images/snipaste.jpg'
import React, { useState } from 'react'
import '@/app.less'

function App() {
  const [count, setCounts] = useState('')
  const onChange = (e: any) => {
    setCounts(e.target.value)
  }

  return (
    <>
      <h2>修改了吧</h2>
      <p>受控组件</p>
      <input type="text" value={count} onChange={onChange} />
      <br />
      <p>非受控组件</p>
      <input type="text" />
      <img src={smallImg} alt="小于50kb的图片" />
      <img src={bigImg} style={{ height: 200 }} alt="大于于10kb的图片" />
      <div className="smallImg"></div> {/* 小图片背景容器 */}
      <div className="bigImg"></div> {/* 大图片背景容器 */}
    </>
  )
}
export default App

4. src/app.less可以修改为

// app.less
#root {
  h2 {
    color: #ff0;
    font-size: 20px;
  }

  .smallImg {
    width: 75px;
    height: 75px;
    background: url('@/assets/images/2021logo.svg') no-repeat;
    background-size: contain;
  }

  .bigImg {
    width: 232px;
    height: 154px;
    background: url('@/assets/images/snipaste.jpg') no-repeat;
    background-size: contain;
  }
}