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'

        })

    ]

}

根据这个配置文件中用到的插件，进行安装，安装的内容如下。

1、安装webpack相关的开发依赖

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

2、安装ts-loader开发依赖

这里是对ts文件进行解析，暂时用到的是ts-loader，所以先安装这个loader，其他用不上的loader先不装。

npm i ts-loader -D

3、安装两个plugin插件——开发依赖

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

4、局部安装typescript

npm i typescript

5、安装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查看控制台，跟之前开发环境的一样效果。