Webpack5 + React + TypeScript + CSS module

使用 Webpack 打包 React 元件，以 TypeScript 開發並支援 CSS module。

參考文章

React + typescript + Webpack in 2024Medium

Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"Stack Overflow

舊文章: Webpack5 + React.v18.2 + CSS moudle

webpack5 + react

一些舊的參考文章

React + Webpack

紀錄關鍵原始碼

用於與 MVC 專案整合 React。

• Webpack.v5.88.2

• React.v18.3.1

• TypeScript.v5.6.3

檔案部局

§ package.json

package.json

{
  "name": "react-widgets",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.22.20",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.15",
    "@types/node": "^16.18.114",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "babel-loader": "^9.1.3",
    "style-loader": "^3.3.3",
    "css-loader": "^6.8.1",
    "eslint": "^9.13.0",
    "html-webpack-plugin": "^5.5.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "ts-loader": "^9.5.1",
    "typescript": "^5.6.3"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

§ webpack.config.js

webpack.config.js

const path = require("path");
//const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production", // development | production
  entry: {
    index: {
      import: '/src/index.js',
      dependOn: 'shared',
    },
    FooC01: {
      import: '/src/MyAreaC/FooC01/app.tsx', // 其他進入點
      dependOn: 'shared',
    },
    FooC02: {
      import: '/src/MyAreaC/FooC02/app.tsx', // 其他進入點
      dependOn: 'shared',
    },
    shared: 'lodash',
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/",
    filename: "[name].bundle.js",
    //library: { // library 只支援單一模組的樣子？這樣不合用。
    //  name: 'reactWidgets',
    //  type: 'umd',
    //},
  },
  optimization: {
    runtimeChunk: 'single',
  },
  //THIS IS JUST TO RESOLVE SOME EXENSIONS
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      // NEW RULE TO HANDLE TS-LOADER
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader", // for styles
        ],
      },
    ],
  },
  //plugins: [
  //  new HtmlWebpackPlugin({
  //    template: "./src/index.html", // base html
  //  }),
  //],
};

§ tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
    "include": [
      "src",
      "declaration.d.ts"
  ]
}

§ declaration.d.ts

TypeScript 預設未包含 CSS module，需再額外設定要包含進來。

declaration.d.ts

declare module "*.module.css";
declare module "*.module.scss";

(EOF)