大きなフロントエンド構造は、一般的にコマンドを使用しました

　　cnpm --saveインストール***** //ミドルウェアは、動作に必要な足場を設置

       cnpm開発プロセスに依存するミドルウェアをインストール**** // --save-devのインストール

　　RM -r -f **** //フォルダを削除することを強制、ディレクトリnode_modulesを削除するために使用

　　WebPACKの//パック命令

　　WebPACKの-devのサーバー--open //サービスのテストを開始し、ブラウザを開き、

 

次のように使用するのWebPACKは以下のとおりです。

VARパスは=（「パス」）を必要とします。

CONST設定= { 
    エントリ： "./src/index.tsx"、
    出力：{ 
        ファイル名： 'bundle.js'、
        パス：path.resolve（__ DIRNAME、 "DIST"）、
        publicPath： "DIST" 
    }、
    devtool： 'ソースマップ」、
    モード： '生産'、// '生産'、//開発
    解決：{ 
        オプション：[ ".TS"、 ".tsx"、 "の.js"] 
    }、
    モジュール：{ 
        ルール：[{ 
                テスト：/\.js$/は、
                強制： '前'を、
                除外する：/ node_modules /、
                ローダーを： 'ソース・マップ・ローダー'を 
                除外する：/ node_modules /、
                使用：[ 'スタイルローダ'、 'CSS-ローダ']、
                除外：/ antd \ / DIST / 
            }、
            { 
                テスト：/\.less$/ 、
                除外する：/ node_modules /、
                使用：[{ 
                        ローダ： 'スタイルローダ' 
                    }、
                    { 
                        ローダ： 'CSS-ローダ'、
                        オプション：{ 
                            importLoaders：1 
                        } 
                    }、
                    { 
                        ローダ： '以下ローダ'、
                        オプション：{
                            importLoaders :. 1、
                            JavascriptEnabled：の真
                        } 
                    } 
                ] 
            }、
            { 
                テスト：/\.tsx?$/、
                ローダ： 'TS-ローダー'、
                除外する：node_modules / / 
            }、
            { 
                // 8キロバイトがBASE64画像関連で提供されるよりも少ない
                試験：/\.(png|jpg)$/、
                除外する：node_modules /、/  
                ローダ：？。「URLローダー名=＆リミット= 8192 / IMG / [ハッシュ] [名前] [EXT] '
            }、
            { 
                テスト：/\.(eot|woff|ttf|svg)$/、
                除外する：node_modules / /、 
                ローダー： "ファイル名=ローダ/ IconFont / [ハッシュ] [EXT]。" 
            }、
            { 
                テスト：/\.(js)$/、
                除外する：node_modules /、/ 
                「ファイルローダー：ローダー？ 。=名/ JS / [名] [EXT] " 
            } 
        ] 
    }、
    devserver：{ 
        ポート：9001、
        watchContentBase：真へ
    }、
    外観は：{//ミドルウェアは、ミドルウェアの開発に、束パックに反応しません
        / 'リアクト' / 'REACT' 
        'DOMが反応する' // 'ReactDOM'、
        // 'antd'： 'antd' 
    } 
}; 
module.exportsは=コンフィグ。