TypeScript简明教程04--使用webpack打包ts文件详解

前言：作为前端开发人员，webpack为项目开发完成打包的工具都应该了解过，简单的配置项的含义和用处是需要掌握的。对于webpack打包ts文件如何进行相关的配置是本文所需要讨论的重点。

一、初始化以及文件创建

   使用npm init -y命令创建package.json文件，如下图所示：

   安装webpack相关插件以及ts加载解析插件typescript-loader。

在package.json中可以看到以下的配置项，证明安装成功。

简单的配置一下tsconfig.json文件，便于对ts文件的解析，针对项目开发中详细的配置项可以参考本教程中的03。

 在创建以上的相关文件以及插件安装后，我们就可以开始对webpack.config.js文件进行详细的配置了。

二、webpack.config.js的文件配置项

       此部分内容为配置项中主要使用的部分，首先我们先对配置项中几个库进行安装以及简单的概念介绍，这样对于我们理解相关配置项会更有帮助。

      安装babel 和core-js等插件。

   2.1什么是Babel?  

     其实简单的来说， Babel是一个编译器，针对JavaScript，那么Babel的存在有什么样的意义呢？我们都了解JavaScript的发展经历了不同的版本，早期版本的JS存在的问题很多，我们现在写es6+语法的时候是不是很方便，提出了promise类，异步async await等便于我们开发的内容语法。虽然开发人员方便了很多，但是浏览器他不兼容啊,兼容性一直是困扰前端开发人员大问题，某些浏览器因为历史原因对于ES6+的语法几乎水火不相容。如何将你使用ES6+开发的程序能在尽可能多的浏览器中运行起来就是Babel出现的原因，他可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数，有了这样一个工具我们就即可以写酸爽的语法，又可以让使浏览器兼容，岂不妙哉？

      备注：安装好webpack我们就可以在package.json文件中进行相关的配置了，下面两项是对打包工具和运行浏览器类型进行了配置。

 

   2.2什么是corejs?

  我们直接看官方文档对于corejs的介绍，看完是不是觉得功能十分强大？

1. 它支持最新的 ECMAScript 标准
2. 它支持ECMAScript 标准库提案
3. 它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关）
4. 它最大限度的模块化：你能仅仅加载你想要使用的功能
5. 它能够不污染全局命名空间
6. 它和babel紧密集成：这能够优化core-js的导入
7. 它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式
（由于很多旧版本的浏览器对于ECMAScript的新语法兼容性不太好，就有了所谓打补丁polyfill通俗的说就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性）

  2.3 webpack.config.js的详细配置项

     在下面配置项的代码中，要注意此文件中如何引入插件并使用插件的，因为在实际的配置中需要用到的插件可能会很多，下面的代码中仅引入了两个最常用的插件，作用在注释中也进行了相关的说明。

//引入一个包
const path = require("path");
//引入html生成插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
//引入clean插件，确保dist中的文件中实时保持为最新的状态
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

//webpack的配置信息都在此文件中
module.exports = {
  //指定入口文件，从何处开始进行打包
  entry: "./src/index.ts",

  //指定为开发模式
  mode: "development",

  //指定打包文件所在的目录
  output: {
    //指定打包的文件的目录
    path: path.resolve(__dirname, "dist"),

    //打包后文件的文件名
    filename: "bundle.js",

    //告诉webpack不使用箭头函数
    environment: {
      arrowFunction: false,
    },
  },

  //指定webpack打包使用的模块
  module: {
    //指定加载的规则，
    rules: [
      {
        //test是指定规则生效的文件,匹配以ts结尾的文件。
        test: /\.ts$/,
        //要使用的loader
        use: [
          {
            //指定加载器
            loader: "babel-loader",
            //设置babel
            options: {
              //设置预定义的环境
              presets: [
                //指定环境的插件
                "@babel/preset-env",
                //配置信息
                {
                  //需要兼容的目标浏览器,
                  target: {
                    chrome: "68",
                    IE:"11",

                  },
                  //指定corejs的版本
                  corejs: "3",
                 
                  //使用corejs的方式，表示按需加载
                  useBuiltIns: "usage",
                },
              ],
            },
          },
          "ts-loader",
        ],
        //要排除的文件
        exclude: /node-module/,
      },
    ],
  },
  //配置webpack使用的插件
  plugins: [
    //使用所引入的模块
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin(),
    //配置生成的html模板
  ],

  //用于设置引用的模块，使得编译器知道以.ts和.js结尾的文件可以作为模块化使用。
  resolve: {
    extensions: [".ts", ".js"],
  },
};

 未进行引用模块的配置项设置直接将外部ts的文件以模块化的方式引入会产生报错，因此extension中的配置项很重要。

三、总结归纳

      通过前面的介绍我们看到webpack.config.js中的配置项众多，想要一次性的记住是比较困难的事情，个人觉得也是没有必要的事情。最重要的还是要清楚每一个配置项的作用，需要的时候去查找具体的使用方法即可。