美文网首页
webpack从0开始搭建react的ts开发环境(12)

webpack从0开始搭建react的ts开发环境(12)

作者: 汤姆猫_6074 | 来源:发表于2020-01-21 17:43 被阅读0次

    分出开发和生产(开发篇)
    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)

    相关文章

      网友评论

          本文标题:webpack从0开始搭建react的ts开发环境(12)

          本文链接:https://www.haomeiwen.com/subject/tcbezctx.html