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

分出开发和生产（开发篇）
webpack从0开始搭建react的ts开发环境（11）
demo https://github.com/757566833/webpack-guide

1.先安装工具

// 合并工具
yarn add webpack-merge @types/webpack-merge --dev

2.新建webpack文件夹,把template.html移到webpack文件夹下
3.在webpack文件夹下新建webpack.common.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'
    },
    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({
            filename: "app.css",
        }),
      
    ],
    
};
export default config;

4.在webpack文件夹下新建webpack.dev.ts

import path from "path";
import webpack from "webpack";
import merge from "webpack-merge";
import common from "./webpack.common";
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
const config: webpack.Configuration = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
//注意这里换了一级目录
        contentBase: "../dist",
        host: "0.0.0.0",
// 这个的作用是让webpack安静点
        stats:'errors-warnings'
    },
    plugins: [
        new ErrorOverlayPlugin()
    ],
});

export default config;

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

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