为react 项目添加 scss 和 ts-CSDN博客

本文链接：https://blog.csdn.net/jomes_wang/article/details/111627383

本文介绍了如何不使用Create-React-App，而是手动配置Webpack、TypeScript和SASS来搭建React项目。首先，安装必要的包并配置Webpack。接着，通过Babel和相关插件使Webpack理解React的JSX语法。然后，添加SASS支持，安装相应的加载器，并创建SASS文件。最后，引入TypeScript，修改Webpack配置，并解决TypeScript编译问题。此外，还提供了一个小技巧，即如何避免在开发模式下生成哈希类名。

摘要由CSDN通过智能技术生成

How to Set Up a React Project Using Webpack, TypeScript, and Sass

Photo by Artem Sapegin on Unsplash

I’ve always used Create-React-App (CRA) when I needed to make a project. I needed to make another React project, but this time I didn’t want to use CRA. I was stuck with many problems and it took a lot of time to get through them. So, let me tell you what I did and how I got through it.

Prior reading

If you aren’t aware of what Webpack is, go to the official Webpack site and read about it.

React Project Setup

First, you need to install some packages for the Webpack or React.

npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loadernpm i -S react react-dom

Webpack is the code bundler for JavaScript, CSS and HTML files. It reduces the size of your project by putting everything into a few files.

touch webpack.config.js

Now, create the configuration file for Webpack. This will be used automatically by the Webpack once you run the program.

const path = require('path');module.exports = {
    
  entry: path.resolve(__dirname, 'src', 'index.jsx'),
  output: {
    
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: "development",
  resolve: {
    
    extensions: ['.js', '.jsx']
  },