webpack从0开始搭建react的ts开发环境（10）

将webpack.config.js 改为ts
webpack从0开始搭建react的ts开发环境（9）
demo https://github.com/757566833/webpack-guide

1. 新建webpack.config.ts
   2.添加插件的types

yarn add @types/html-webpack-plugin @types/mini-css-extract-plugin @types/webpack-dev-server --dev

3.添加ts运行时

yarn add ts-node --dev

4.webpack.config.ts写入

import path from 'path';
import HtmlWebpackPlugin  from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import tsImportPluginFactory from "ts-import-plugin";
import webpack from "webpack";
const config: webpack.Configuration = {
    entry: './src/app.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    mode: 'development',
    module: {
        rules: [{
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    transpileOnly: true,
                    getCustomTransformers: () => ({
                        before: [tsImportPluginFactory({
                            libraryName: "antd",
                            libraryDirectory: "lib",
                            style: true,
                        })],
                    }),
                    compilerOptions: {
                        module: "es2015",
                    },
                },
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                    },

                ],
                exclude: /node_modules/,
            },
            {
                test: /\.less$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "less-loader",
                    },
                ],
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'sass-loader'
                }],
                exclude: /node_modules/
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "test",
            template: path.resolve(__dirname, "template.html"),
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: "app.css",
            // chunkFilename: "[id].[hash].css",
            // ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    devServer: {
        contentBase: "./dist",
        host: "0.0.0.0",
    },
};
export default config;

5.package.json修改

...
 "scripts": {
    "test": "tsc",
    "webpack": "webpack",
    "start":"webpack-dev-server --config webpack.config.ts"
  }
...

6.yarn start
webpack从0开始搭建react的ts开发环境（11）