1、实现目标

  • 加载图片；
  • 加载字体；
  • 加载 CSS；
  • 使用 SASS；
  • 使用 PostCSS，并自动为 CSS 规则添加前缀，解析最新的 CSS 语法，引入 css-modules 解决全局命名冲突问题；
  • 使用 React；
  • 使用 TypeScript；

2、进阶配置

2.1 加载图片（Image）

在 webpack 5之前使用：

webpack5之后使用：Assetmodules；

修改通用环境配置文件 webpack.commom.js：

  1. const paths = require('./paths');
  2. module.exports = {
  3.     module: {
  4.         rules: [
  5.           {
  6.             test: /\.(png|svg|jpg|jpeg|gif)$/i,
  7.             include: [
  8.                paths.resolveApp('src'),,
  9.             ],
  10.             type: 'asset/resource',
  11.           },
  12.         ],
  13.       },
  14. }

2.2 加载SASS

安装SASS相关依赖：

  1. npm install --save-dev sass-loader sass

修改通用环境配置文件 webpack.commom.js：

  1. {
  2.    test: /.(scss|sass)$/,
  3.    include: paths.appSrc,
  4.    use: [
  5.       // 将 JS 字符串生成为 style 节点
  6.       'style-loader',
  7.      // 将 CSS 转化成 CommonJS 模块
  8.       'css-loader',
  9.      // 将 Sass 编译成 CSS
  10.       'sass-loader',
  11.   ],
  12. }

2.3 使用PostCSS

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具；

  • 可以自动为 CSS 规则添加前缀；
  • 将最新的 CSS 语法转换成大多数浏览器都能理解的语法；
  • css-modules 解决全局命名冲突问题。

postcss-loader使用 PostCSS处理 CSS 的 loader；

安装 PostCSS 相关依赖：

  1. npm install --save-dev postcss-loader postcss postcss-preset-env

修改通用环境配置文件 webpack.commom.js：

  1. {
  2.         test: /\.module\.(scss|sass)$/,
  3.         include: paths.appSrc,
  4.         use: [
  5.           // 将 JS 字符串生成为 style 节点
  6.           'style-loader',
  7.           // 将 CSS 转化成 CommonJS 模块
  8.           {
  9.             loader: 'css-loader',
  10.             options: {
  11.               modules: true,
  12.               importLoaders: 2,
  13.             },
  14.           },
  15.           // 将 PostCSS 编译成 CSS
  16.           {
  17.             loader: 'postcss-loader',
  18.             options: {
  19.               postcssOptions: {
  20.                 plugins: [
  21.                   [
  22.                     // postcss-preset-env 包含 autoprefixer
  23.                     'postcss-preset-env',
  24.                   ],
  25.                 ],
  26.               },
  27.             },
  28.           },
  29.           // 将 Sass 编译成 CSS
  30.           'sass-loader',
  31.         ],
  32.       }

2.4 使用 React + TypeScript

安装React相关和TypeScript：

为提高性能，选择最新的 esbuild-loader；

  1. npm i react react-dom @types/react @types/react-dom -D
  2. npm i -D typescript esbuild-loader

加入TS配置tsconfig.json：

  1. {
  2.     "compilerOptions": {
  3.         "outDir": "./dist/",
  4.         "noImplicitAny": true,
  5.         "module": "es6",
  6.         "target": "es5",
  7.         "jsx": "react",
  8.         "allowJs": true,
  9.         "moduleResolution": "node",
  10.         "allowSyntheticDefaultImports": true,
  11.         "esModuleInterop": true,
  12.       }
  13. }

修改通用环境配置文件 webpack.commom.js：

  1. module.exports = {
  2.     resolve: {
  3.         extensions: ['.tsx', '.ts', '.js'],
  4.     },
  5.     module: {
  6.         rules: [
  7.             {
  8.                 test: /\.(js|ts|jsx|tsx)$/,
  9.                 include: paths.appSrc,
  10.                 use: [
  11.                   {
  12.                     loader: 'esbuild-loader',
  13.                     options: {
  14.                       loader: 'tsx',
  15.                       target: 'es2015',
  16.                     },
  17.                   }
  18.                 ]
  19.               },
  20.          ]
  21.      }
  22.  }

3、本节代码

代码地址：https://gitee.com/linhexs/webpack5/tree/3.practice-advanced/