ts-webpack环境搭建

安装ts
查版本
安装webpack

npm instal typescript -g
tsc -v
npm install webpack webpack-cli -D
npm init
（选项一路回车就好）
npm install ts-loader -D

到这里目录文件就搭建好了，可以写配置文件了，在跟目录创建webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development", //指定环境
    entry: "./src/main.ts",  //入口，要打包的文件
    output: {	//出口，打包到哪里
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    devServer: {}, //配置本地服务，端口，ip啥啥的
    resolve: {  //自定义文件后缀名
        extensions: [".ts", ".js", ".cjs", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },
    plugins: [  //指定模板
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
}

对，还要在package.json里添加调试指令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
  },

到这里就可以写测试代码，打包测试啦，但是运行npm run build会报错，那是因为缺少tsconfig.json，继续运行指令，如果实在cmd运行，那就比较顺利，但是如果在vscode终端运行tsc，那就又会报错了，简单粗暴，因为vscode不支持tsc指令，要切换到cmd，就木的问题

tsc --init

到这里就能正常跑起来了，但是每次编译都要手动build，偷个懒我们可以安装几个webpack相关包，在devServer里边配置本地服务，当然也可以不配置，使用默认的，让他自己跑起来

npm install webpack-dev-server -D
npm install html-webpack-plugin -D

在package.json里添加调试指令，在配置文件导入HtmlWebpackPlugin，配置plugins，指定自动编译的模板，webpack.config.js见最上边

"serve": "webpack serve"

大功告成！！

注意，最后运行可能也会报错
这个是因为在webpack.config.js自定义文件后缀名时候，没有添加完整的后缀名

这个是要在webpack.config.js里配置生产环境，不过这个不会影响太大

能在cmd里跑的命令，就不要在别的终端跑了！！