1. nvm use 12
    2. npm i typescript -g
    3. tsc --init //生成Ts的标准编译配置（tsconfig.json）
    4. //安装webpack相关包
    5. npm i webpack wepack-cli webpack-dev-server -D
    7. //webpack加载包
    8. npm ts-loader typescript -D
    10. //自动生成首页并且加载相关Js文件的辅助工具
    11. npm install html-webpack-plugin -D
    13. //自动清空冗余编译代码
    14. cnpm install clean-webpack-plugin -D
    16. //合并代码工具
    17. cnpm install webpack-merge -D

    创建build文件夹，添加四个文件
    build/webpack.base.config.js

    1. const HtmlWebpackPlugin = require('html-webpack-plugin')
    3. module.exports = {
    4.     entry: './index.ts',
    5.     output: {
    6.         filename: 'app.js'
    7.     },
    8.     resolve: {
    9.         extensions: ['.js', '.ts', '.tsx']
    10.     },
    11.     module: {
    12.         rules: [
    13.             {
    14.                 test: /\.tsx?$/i,
    15.                 use: [{
    16.                     loader: 'ts-loader'
    17.                 }],
    18.                 exclude: /node_modules/
    19.             }
    20.         ]
    21.     },
    22.     plugins: [
    23.         new HtmlWebpackPlugin({
    24.             template: './src/tpl/index.html'
    25.         })
    26.     ]
    27. }

    build/webpack.config.js

    1. const { merge } = require('webpack-merge')
    2. const baseConfig = require('./webpack.base.config')
    3. const devConfig = require('./webpack.dev.config')
    4. const proConfig = require('./webpack.pro.config')
    6. module.exports = (env, argv) => {
    7.     let config = argv.mode === 'development' ? devConfig : proConfig;
    8.     return merge(baseConfig, config);
    9. };

    build/webpack.dev.config.js

    1. /**
    2.  * 官方推荐包之一
    3.  * cheap 会忽略文件的列信息
    4.  * modules 会定位到Ts源码而不是转义后的Js代码
    5.  * eval-source-map 会将source-map打包到Url文件中
    6.  */
    7. const webpack = require('webpack');
    8. module.exports = {
    9.     plugins: [
    10.         new webpack.LoaderOptionsPlugin({
    11.             options: {
    12.                 devtools: 'cheap-module-eval-source-map'
    13.             }
    14.         })
    15.     ]
    16. }

    build/webpack.pro.config.js

    1. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    3. module.exports = {
    4.     plugins: [
    5.         new CleanWebpackPlugin()
    6.     ]
    7. }

    添加package.json中的编译命令

    1. ...
    2. "scripts": {
    3.     "start": "webpack serve --mode development --env development --config ./build/webpack.config.js",
    4.     "test": "echo \"Error: no test specified\" && exit 1"
    5.   },
    6. ...