我用ts+react+webpack搭了个环境

```javascript
**1.** npm init -y
**2.** npm i --save react -react-dom antd //安装react 需要的插件
**3.** npm i -D @types/react @types/react-dom
**3.** npm i webpack webpack-cli webpack-command --save-dev
**4.** npm i -save -dev webpack-dev-server@3.11.2  //最新版 和 webpack-cli 不兼容
**5.** npm i --save-dev  html-webpack-plugin //自动创 html文件
**6.** npm i --save-dev clean-webpack-plugin // 清楚打包多余的文件

**7.**
npm i --save-dev style-loader css-loader  // css相关loader
npm i --save-dev node-sass sass-loader  // scss 相关loader
npm i --save-dev file-loader url-loader // 加载其他文件，比如图片，字体

**8.** 
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react  @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader  //安装babel

**9.** npm i -save -dev mini-css-extract-plugin  //会生成.d.ts文件

**10.**
npm i -save -dev optimize-css-assets-webpack-plugin  //css 压缩
npm i -save -dev terser-webpack-plugin

**11.webpack.config.js**

const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //css 压缩
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.tsx'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'buildle.js')
    },
    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [{
                loader: MiniCssExtractPlugin.loader
            }, {
                loader: require.resolve('typings-for-css-modules-loader'),  //会生成.d.ts文件
                options: {
                    modules: true,
                    namedExport: true,
                    camelCase: true,
                    localIdentName: '[name].[hash]'
                }
            }, {
                loader: require.resolve('sass-loader')
            }]
        },{
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
            }
        }, {
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    devServer: {
        contentBase: './build',
        port: 8081, // 端口号
        inline: true,
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlPlugin({
            template: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash].css'
        }),
        // typings-for-css-modules-loader会生成.d.ts文件，需要告诉webpack忽略它们。
        new webpack.WatchIgnorePlugin([/css\.d\.ts$/, /scss\.d\.ts$/])
    ],
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
    },
}



**12.tsconfig.json**

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node"
    }
}

**13.package.json**

"scripts": {
    "start": "webpack-dev-server --open --mode production",
    "watch": "webpack --watch",
    "build": "webpack --mode production",
    "dev": "webpack  --mode development& webpack-dev-server --open  --mode development",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

**

**14. babelrc**

**
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}