在 ts 中加载 css 样式和图片

在 ts 环境中加载 css 样式和图片都需要简单的配置，配置流程如下：

加载 css 样式

• 首先需要下载额外的依赖：

npm i --save-dev css-loader style-loader

• 下载完依赖之后，需要到 webpack.config.js 文件中配置识别 css module 的配置项：

module: {
     
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      {
      test: /\.tsx?$/, loader: "ts-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
      enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

      // Load .css files
      {
      test: /\.css$/, use: ["style-loader", "css-loader"] },
    ]
  },

这样就可以在文件加载 css 样式了，简单实用：）

import "styles.css"; // 不要忘记了 .css 的后缀 

ts 中加载图片

• 第一步还是下载依赖：

npm i --save-dev file-loader

• 下载完依赖之后，接着还是到 webpack.config.js 文件中配置加载图片的配置项：
  接着上面 css 的配置项后面接着写就ok了

module: {
     
     rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      {
      test: /\.tsx?$/, loader: "ts-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
      enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

      // Load .css files
      {
      test: /\.css$/, use: ["style-loader", "css-loader"] },
      
      //Load image
      {
      test: /\.(jpg|jpeg|png|svg)$/, loader: 'file-loader', options: {
      name: 'images/[hash].[ext]' } },
    ]
  },

• 最重要的是需要引入 images.d.ts 文件，并且将该文件放在 tsconfig.json 同级路径下，images.d.ts 内容：

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";

这样就可以识别所有不同后缀名的文件了

• 引入图片

import img from "../public/images/homephoto.png";