TypeScript --01新建

TS 基础篇

• 创建项目流程

      npm init -y       // 初始化，得到一个package.json 文件
      
      TSC --init    // 创建 TS 配置项
      
      npm i webpack webpack-cli webpack-dev-server -D       // 安装webpack插件来启动项目
      
      npm i ts-loader typescript -D
      
      npm i html-webpack-plugin -D  // html的模板
      
      npm i clean-webpack-plugin -D     //清理dist文件夹插件
      
      npm i webpack-merge -D        //用来合并配置文件
  

• webpack 中对每个环境的配置

  • webpack.base.config.js 公共的配置

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
      entry: './src/index.ts',
      output: {
        filename: 'app.js'
      },
      resolve: {
        extensions: ['.js', '.ts', '.tsx']
      },
      module: {
        rules: [{
          test: /\.tsx?$/i,
          use: [{
            loader: 'ts-loader'
          }],
          exclude: /node_modules/
        }]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/tpl/index.html'
        })
      ]
    }
    

  • webpack.dev.config.js 开发环境的配置

      module.exports = {
        devtool: 'cheap-module-eval-source-map'
      }
    

  • webpack.pro.config.js 生产环境的配置

      const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    
      module.exports = {
          plugins: [
              new CleanWebpackPlugin()
          ]
      }
    

  • webpack.config.js 配置的入口文件

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

• package.json 中添加执行命令

  • 开发

    "dev":"webpack-dev-server --mode=development --config ./build/webpack.config.js",
    

  • 打包

    "build":"webpack --mode=production --config ./build/webpack.config.js",