ts項目初始化

1. 全局安裝

npm i typescript -g
npm i tslint -g

2. 項目初始化

npm init     // 生成package.json
tsc --init    // 生成tsconfig.json

tsconfig.json文件內容（對於其中每一項的含義，后面補充）

 3.項目中安裝typescript， webpack, webpack-cli, webpack-dev-server

npm i typescript 
npm i webpack webpack-cli webpack-dev-server -D

4. 手動添加文件夾，項目目錄結構如下：

 

 

 5. 在package.json中增加scripts

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
  },

對於開發環境，添加start：前半段使用cross-env傳遞 NODE_ENV=development  變量，后半段以  ./build/webpack.config.js 中的配置運行webpack-dev-server。

對於生產環境，添加build： 注意后半段用的是webpack而非webpack-dev-server， 前半段通過cross-env傳遞的變量NODE_ENV值為production

cross-env需要安裝

npm i cross-env -D

6. webpack.config.js配置

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, "../src/index.ts"),
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "main.js"
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    devtool: process.env.NODE_END === 'production' ? false : 'inline-source-map',
    devServer: {
        // contentBase: path.join(__dirname, '../dist'),
        stats: 'errors-only',
        compress: false,
        host: 'localhost',
        port: 8099
    },
    plugins: [
        new CleanWebpackPlugin({
            CleanOnceBeforeBuildPatterns: [path.join(__dirname, './dist')]
        }),
        new HTMLWebpackPlugin({
            template: './src/template/index.html'
        })
    ]
}