通过 SASS 支持搜索带有 Typescript、SASS 和 CSS 模块的 React 组件库的 Webpack 配置答案

【问题标题】：Searching for Webpack config for React Components Library with Typescript, SASS & CSS Modules via SASS support通过 SASS 支持搜索带有 Typescript、SASS 和 CSS 模块的 React 组件库的 Webpack 配置
【发布时间】：2019-12-21 04:26:53
【问题描述】：

正如标题所说，我正在为 React 组件库寻找一个有效的 Webpack 配置，通过 SASS 支持 Typescript、SASS 和 CSS 模块。如果有人有一个并且想在这里分享它，我将非常感激。

【问题讨论】：

标签： node.js reactjs typescript webpack sass

【解决方案1】：

创建 tsconfig.json 文件

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

安装开发依赖

npm install webpack webpack-cli webpack-dev-server typescript ts-loader style-loader css-loader sass-loader --save-dev

然后创建 webpack.config.js

const path = require('path');

module.exports = {
  entry: path.join(__dirname, '/app.ts'),
  output: {
    filename: 'app.js',
    path: __dirname
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: "css-loader",
            options: {
              minimize: true,
              sourceMap: true
            }
          },
          {
            loader: "sass-loader"
          }
        ]
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  }
};

【讨论】：

谢谢。此配置有效。此外，我一直在我的项目中使用错误的 webpack 配置（我有多个）。