TypeScript——使用webpack搭建開發環境

npm初始化項目

首先新建一個文件夾存儲項目

mkdir webpack_ts_demo

接着進入這個文件目錄中

cd webpack_ts_demo

初始化項目，-y 能夠快速初始化，省去了一系列填寫的內容。

npm init -y

這時，項目中就多出了一個package.json文件。修改一下main屬性，這個屬性指的是入口文件的位置。

在項目中，新建文件夾，以下圖所示。

全局安裝typescript、tslint

sudo npm i typescript tslint -g

tsc初始化配置

tsc --init

tsc初始化以後，在項目目錄中，會生成一個tsconfig.json文件。

配置webpack

打開目錄中新建了的webpack.config.js文件，配置這個文件。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');     // 這裏須要把CleanWebpackPlugin寫在{}裏

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

module.exports = {

    entry: './src/index.ts',

    output: {
    
    filename:  'main.js'

    },

    resolve: {

        extensions:  ['.ts', '.tsx', '.js']     //  這裏不要漏寫圓點

    },

    module: {

        rules: [{

            test:  /\.tsx?$/,

            use: 'ts-loader',

            exclude: /node\_modules/

        }]

    },

    devtool: process.env.NODE_ENV === 'production' ? false  :  'inline-source-map',

    devServer: {

        contentBase:  './dist',

        compress:  false,

        port:  9010,

        stats:  'errors-only',

        host:  'localhost'

    },

    plugins: [

        new CleanWebpackPlugin({

            cleanOnceBeforeBuildPatterns: ['./dist']

        }),

        new  HtmlWebpackPlugin({

            template:'./src/index.html'

        })

    ]

}

根據這個配置文件中用到的插件，進行安裝，安裝的內容以下。

一、安裝webpack相關的開發依賴

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

二、安裝ts-loader開發依賴

這裏是對ts文件進行解析，暫時用到的是ts-loader，因此先安裝這個loader，其餘用不上的loader先不裝。

npm i ts-loader -D

三、安裝兩個plugin插件——開發依賴

npm i clean-webpack-plugin html-webpack-plugin -D

四、局部安裝typescript

npm i typescript

五、安裝cross-env

cross-env的做用是，在使用package.json中start或build指令啓動本地項目或者打包生產環境包的時候，可以傳一個參數給webpack.config.js配置文件，讓它識別是開發環境（development）仍是生產環境（production）。

npm i cross-env -D

package.json相關配置

"scripts": {

    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"

}

webpack.config.js配置devtool

若是是生產環境，就不須要使用source-map，若是是開發環境，則使用source-map。使用source-map的目的是方便本地調試，快速定位問題所在。而不在生產環境使用scource-map是爲了節省資源，提高打包速度。

devtool: process.env.NODE.ENV === 'production' ? false :  'inline-source-map',

devtool是與module、plugins等同級的一個屬性。

開發環境啓動

在src新建的index.ts文件中，寫點東西，打開瀏覽器驗證一下是否可用。

const  num1:  number = 1;

console.log(num1);

接着運行

npm start

成功啓動本地項目。

瀏覽器顯示了index.ts文件中的內容。

生產環境打包

打包

npm run build

成功打包。

接着，能夠手動打開dist文件夾中生成的index.html文件，F12查看控制檯，跟以前開發環境的同樣效果。