TS学习笔记（2）之TypeScript结合webpack打包工具环境搭建

这一节课真是学得云里雾里，不知道手动的梳理一遍会不会好一点。

一、打包工具webpack所起到的作用。

        从达到的效果去学习一个东西最快，如果连自己学的是什么都不知道，那更难理解每一步的步骤。webpack在TS的编译中所起到的作用是将整个TS代码项目进行托管，代码书写完成后，可以很方便的对整个项目进行打包，调试，比上一节的tsc命令编译指定文件夹的TS文件更加智能、复杂。

二、环境搭建步骤。

（1）在项目目录的命令行模式下，使用命令

npm init -y

对整个项目生成配置文件，也称为配置文件初始化。文件名为package.json。里面有各个模块的版本号，以及各种代码信息，以键值对的形式保存。

（2）继续安装webpack模块并配置

npm install -D webpack webpack-cli typescript ts-loader

安装完模块后，需要对webpack进行配置，否则系统怎么知道我们想怎么编译呢？这时候新建一个webpack.config.js文件，在里面写上属性。包括入口文件、打包文件目录、打包时使用的规则。

// 引入包进行路径拼接
const path = require('path')

// webpack配置信息
module.exports = {
    // 入口文件
    entry: "./src/index.ts",
    // 要打包的文件目录
    output: {
        // 打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后的文件
        filename: "bundle.js"
    },
    // webpack打包时使用的模块
    module: {
        // 加载规则
        rules: [
            {
                // 使用该规则的文件 正则匹配
                test: /\.ts$/,
                use: 'ts-loader',
                // 不使用规则的文件夹
                exclude: /node_modules/
            }
        ]
    }
}

（3）加载html模板并配置

这一步骤的作用是将编译后的js文件自动插入到html文件中，人工去创建引入太麻烦了，因此需要这个工具，首先是安装。

npm install -D html-webpack-plugin

然后配置还是写在第二步webpack的配置文件里。看HTMLWebpackPlugin是怎么引入的就行。

// 引入包进行路径拼接
const path = require('path')
// 引入html插件(打包后自动生成html文件)
const HTMLWebpackPlugin = require("html-webpack-plugin")

// webpack配置信息
module.exports = {
    // 入口文件
    entry: "./src/index.ts",
    // 要打包的文件目录
    output: {
        // 打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后的文件
        filename: "bundle.js"
    },
    // webpack打包时使用的模块
    module: {
        // 加载规则
        rules: [
            {
                // 使用该规则的文件 正则匹配
                test: /\.ts$/,
                use: 'ts-loader',
                // 不使用规则的文件夹
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: "./src/index.html"
        })
    ]
}

（4）clean-webpack-plugin安装以及配置

这个模块用来编译前清空所有上一次编译的代码文件，这样可以更加干净，确保新编译的为最新数据。使用命令安装。

npm install -D clean-webpack-plugin

然后在webpack配置文件里面配置。

引入以及使用：

// 引入包进行路径拼接
const path = require('path')
// 引入html插件(打包后自动生成html文件)
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
// webpack配置信息
module.exports = {
    // 入口文件
    entry: "./src/index.ts",
    // 要打包的文件目录
    output: {
        // 打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后的文件
        filename: "bundle.js"
    },
    // webpack打包时使用的模块
    module: {
        // 加载规则
        rules: [
            {
                // 使用该规则的文件 正则匹配
                test: /\.ts$/,
                use: 'ts-loader',
                // 不使用规则的文件夹
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: "./src/index.html"
        })
    ]
}

（5）设置引用模块。

为了让TS暴露出的变量可以让别人引用，需要设置引用模块。

在plugins的同级属性下，添加

resolve: {
        extensions: ['.ts', '.js']
    }

（6）设置打包命令

在package.json里面scripts属性里添加如下，这样使用命令npm run build就可以实现打包。

 "scripts": {
   "build": "webpack",
    
  }

（7）热部署

热部署就是为了实现代码改动，页面也同步发生改变，可以起到快速调试的效果。先安装

npm install -D webpack-dev-server

之后在第六步的同一个位置添加命令。最终配置：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack server --open chrome.exe"
  },

三、总结

第一次学习webpack，非常麻烦，还得多练习几遍才能掌握。