# webpack-react

**Repository Path**: lv_yan-a/webpack-react

## Basic Information

- **Project Name**: webpack-react
- **Description**: webpack搭建react
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-07-11
- **Last Updated**: 2024-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, webpack, JavaScript, TypeScript, Ant-Design

## README

## 1. 初始化package.josn
```
npm install -y
```

## 2. 安装webpack
```
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin
```

## 3. 安装babel核心模块和babel预设
```
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime -D
```
#### 1. babel-loader：这是一个Webpack加载器，用于将ES6+代码转换为向后兼容的JavaScript代码。它会将你的代码传递给Babel进行转译。 

#### 2. @babel/core：这是Babel的核心库，它负责实际的代码转译工作。它将JavaScript代码解析成抽象语法树（AST），然后将其转换为兼容的代码。

#### 3. @babel/preset-env：这是Babel的预设之一，用于根据目标环境自动确定需要的转译插件。它根据你在配置文件中指定的目标环境（如浏览器版本）来选择适当的转译插件

#### 4. @babel/preset-react：这是Babel的另一个预设，用于将JSX语法转换为普通的JavaScript代码。它允许你在React项目中使用JSX语法。 

#### 5. Babel将会使用 @babel/plugin-transform-runtime 插件来处理转换过程中的辅助函数，从而减小生成的代码体积。


## 4. 安装react react-dom
```
yarn add react react-dom
```

## 5. 创建项目文件结构
```
- src
  |- index.js
- public
  |- index.html

```

## 6. 配置webpack
### 1. 在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下配置
```
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");
const devConfig = require("./webpack.config.dev.js");
const prodConfig = require("./webpack.config.prod.js");

module.exports = (env, argv) => {
  console.log(env, argv);
  if (argv.mode === "development") {
    return merge(baseConfig, devConfig);
  }

  if (argv.mode === "production") {
    return merge(baseConfig, prodConfig);
  }
  // Add production config here if needed
};
```

### 2. 在项目根目录下创建一个名为 webpack.config.base.js 的文件，并添加以下配置
```
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "My App",
      template: "./src/index.html",
    }),
  ],
  resolve: {
    // 配置别名
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    // 引入文件忽略文件扩展名
    extensions: [".js", ".jsx", ".tsx", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
          },
        },
      },
      {
        test: /\.(jsx|tsx)?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react","@babel/preset-typescript"],
            plugins: ["@babel/plugin-transform-runtime"],
          },
        },
      },
      // 配置 sass-loader 和 css-loader 和 style-loader
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
          "sass-loader",
        ],
      },
    ],
  },
};
```

### 3. 在项目根目录下创建一个名为 webpack.config.dev.js 的文件，并添加以下配置
```
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");
const path = require("path");

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    static: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    open: true,
  },
};
```

### 4. 在项目根目录下创建一个名为 webpack.config.prod.js 的文件，并添加以下配置
```
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");

module.exports = module.exports = {
  mode: "production",
  devtool: "source-map",
};
```

## 7. 使用sass
```
yarn add sass sass-loader style-loader css-loader -D
```

#### 配置文件
```
 module: {
    rules: [
      // 配置 css-loader 和 style-loader
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      // 配置 sass-loader 和 css-loader 和 style-loader
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
          "sass-loader",
        ],
      },
    ]
  ```


## 8. 创建React组
在 src 文件夹中创建一个名为 index.js 的文件，并添加以下代码
```
import React from 'react';
import ReactDOM from 'react-dom';
 const App = () => {
  return <h1>Hello, React!</h1>;
};
 ReactDOM.render(<App />, document.getElementById('root'));
```

## 9. 创建HTML模板文件 
在 public 文件夹中创建一个名为 index.html 的文件，并添加以下代码：
```
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
```

## 10. 添加ts
#### 1. 安装依赖项
```
yarn add typescript @types/node @types/react @types/react-dom ts-loader @babel/preset-typescript -D
```

#### 2. 配置 tsconfig.json 文件
```
   {
     "compilerOptions": {
       "target": "es5",
       "lib": ["dom", "dom.iterable", "esnext"],
       "allowJs": true,
       "skipLibCheck": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
       "strict": true,
       "forceConsistentCasingInFileNames": true,
       "module": "esnext",
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "isolatedModules": true,
       "noEmit": true,
       "jsx": "react-jsx"
     },
     "include": ["src"]
   }
```


## 11. 运行项目 
```
npx webpack serve --open
```

## 12. 安装progress-bar-webpack-plugin 编译进度条
```
yarn add progress-bar-webpack-plugin -D
```
```
plugins: [
    new ProgressBarWebpackPlugin(),
  ],
``` 


## 13. 打包拆分css js image文件
#### 1.图片打包配置
```
yarn add url-loader file-loader -D
```

```
 module: {
         rules: [
           {
             test: /\.(png|jpg|gif)$/,
             use: [
               {
                 loader: 'url-loader',
                 options: {
                   limit: 8192, // 小于8KB的图片将会被转为base64
                   name: 'images/[name].[ext]', // 输出到指定的文件夹
                 },
               },
             ],
           },
         ],
       },
```

#### 2.CSS文件配置
```
yarn add mini-css-extract-plugin -D
```

```
module: {
  rules: [
   {
      test: /\.(css|scss)$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {
            modules: true,
          },
        },
        "sass-loader",
      ],
    },
  ],
}


 plugins: [
         new MiniCssExtractPlugin({
           filename: '[name].css',
           chunkFilename: '[id].css',
         }),
         // 其他插件...
       ],
```      

#### 3.js文件配置
```
 output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
  },
```       

## 14. 分析项目打包体积
```
yarn add webpack-bundle-analyzer -D
```
```
plugins: [
    new BundleAnalyzerPlugin(),
    // 其他插件...
  ],
```

## 15. 配置 externals cdn
```
 externals: {
    // 模块名: 全局变量
    "@antv/g2plot": "G2Plot",
  },
```

把js css cdn链接放入 html-webpack-plugin 
```
 new HtmlWebpackPlugin({
      title: "My App",
      template: "./public/index.html",
      // HtmlWebpackPlugin的其他配置项...
      // 这里可以设置其他的HtmlWebpackPlugin配置项
      cdn: cdn, // 将cdn数组作为HtmlWebpackPlugin的自定义配置项
    }),
```

index.html文件
```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>

  <!-- 使用cdncss -->
  <% htmlWebpackPlugin.options.cdn.css.forEach(v=> { %>
    <link rel="<%= v.rel %>" href="<%= v.url %>">
    </link>
    <% }) %>
</head>

<body>
  <div id="root"></div>

  <!-- 使用cdn -->
  <% htmlWebpackPlugin.options.cdn.js.forEach(v=> { %>
    <% if(v.defer){ %>
      <script type="text/javascript" defer src="<%= v.url %>"></script>
      <% }else if(v.async){ %>
        <script type="text/javascript" async src="<%= v.url %>"></script>
        <% }else{ %>
          <script type="text/javascript" src="<%= v.url %>"></script>
          <% } %>
            <% }) %>
</body>

</html>
```

## 16. 配置 tailwindcss
1. 下载依赖
```
yarn add -D tailwindcss postcss autoprefixer
```
2. 配置 postcss.config.js 文件
```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```
3. 配置 tailwind.config.js 文件
```
module.exports = {
	content: [
		// Example content paths...
		'./public/**/*.html',
		'./src/**/*.{js,jsx,ts,tsx,vue}'
	],
	// purge: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.jsx'],
	// darkMode: 'media ', // or 'media' or 'class'
	important: true,
	theme: {
		extend: {}
	},
	variants: {
		extend: {}
	},
	plugins: [],
	corePlugins: {
		preflight: false
	}
};

```

4. 配置 index.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

5. 配置完后不生效 https://developer.aliyun.com/article/1248493

class name 被 Module CSS 重新命令了，导致元素上的 class name 在style标中压根找不到对应的 css rules 那这应该就是问题的根源所在了。

基本清楚了问题点关键点在于编译后的 class name 被重新命名了，那就是模块化的问题。所以第一时间想到了 css-loader（因为它就是干这事儿的）

配置 css-loader 中的 modules
```
{
						loader: 'css-loader',
						// tailwindcss 要加以下代码
						options: {
							modules: {
								mode: 'icss',
								localIdentName: '[path][name]__[local]--[hash:5]'
							}
						}
					},
```