typescript_搭建开发环境

1. npm init
2. npm i typescript -D
3. npm tsc --init
4. 新建src,index.ts
   5.npm i webpack webpack-cli webpack-dev-server -D
5. 根目录新建build文件
6. 创建4个文件
   webpack.base.config.js webpack配置公共文件
   webpack.config.js webpack总配置文件
   webpack.dev.config.js webpack开发配置文件
   webpack.pro.config.js webpack线上配置文件
   其中
   webpack.base.config.js
   npm i ts-loader typescript -D
   注意 : 因为安装了ts-loader 所以typescript要重新安装一遍
   npm i html-webpack-plugin -D

//公共webpack文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//指定html模板 HtmlWebpackPlugin

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.pro.config.js
npm i clean-webpack-plugin -D

const {CleanWebpackPlugin} = require("clean-webpack-plugin");
//CleanWebpackPlugin 每次清空dist文件

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

webpack.dev.config.js

module.exports = {
    devtool: "cheap-module-eval-source-map"
}
//cheap:忽略文件类信息
//module:定位到ts源码,而不是定位到打包之后的js源码
//eval-source-map 打包,不会重叠

webpack.config.js
npm i webpack-merge -D

const merge = require("webpack-merge");
//webpack-merge 合并webpack配置文件
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config")

let config = process.NODE_ENV === "development" ? devConfig : proConfig;

module.exports = merge(baseConfig,config);

7. 在src目录下,新建tpl文件夹,创建index.html
8. 修改package.json文件

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

其中
webpack-dev-serve
起一个本地服务
–mode=development
意思是 将环境变量修改为development
–config ./build/webpack.config.js"
执行指定的配置文件