webpack之旅: (五)基础打包Library库文件和TypeScript的webpack基础打包

今天开始我讲以一些具体的打包例子继续给大家说说webpack中一些可能比较常用到的配置项:

---

• 今天我将以两个简单的例子，打包Library文件和打包配置TypeScript的代码为例子为大家介绍:

1. 关于Library库文件，我们可以将它理解成一些包文件，资源文件，就好比是npm上提供给我们使用的这些的包一样。既然如此，我们就应该清楚，这样的包文件都是可以被使用者直接以 import 这样的es module的语法或者 require 这样的commonjs的语法进行引入使用的，甚至有些可以被使用者直接在html文件中以 <script> 这样标签的形式直接被引入使用的，那么如此我们需要怎样对我们的文件进行相应的配置才是可以实现的呢?

• 它的实现其实很简单，我们只需要在output配置项中加入libraryTarget 和 library 配置即可。关于这两个配置:
• libraryTarget: 该配置项可以配置为 "umd"值，表示我们当前打包的库文件允许使用任何的形式进行引入，包括es moduel 的引入和 commonjs 的引入等等。当然libraryTarget的配置参数也可以是其他的： 比如可以配置成 “this”, "window"之类的，当然这样配置后也就不支持es module和commonjs的引入方式了，所以这里我也就不具体阐述了。
• library： 该配置项的含义是我们打包生成的库文件允许使用者在html中以 <script> 标签的形式进行引入。 (这里配置项的实际的实现原理是会在我们引入该库文件时，将我们library指定的这个库文件挂载到我们的页面上，可以给使用者直接的调用该文件对象)
• 这里的简单配置如下：

const path = require('path')
module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "library.js",
        library: "library",
        libraryTarget: "umd"   // 该配置表示无论外部采用什么方式引入我们的库文件都能够引入到
    }
}

• 当然处理完这两项配置后，我们在编写库文件的时候可能还有这样的需求：我们编写的库文件中需要引入一些其他的第三方的包，但是这些包文件我们并不希望直接打包到我们的库文件中，而是在使用者引入该文件之前先引入该库文件所依赖的包后在引入该库，减少库文件的代码大小，那么我们此时还可以配置一个 externals 属性，该属性值是一个对象，指定我们不需要打包到库文件中的包，配置后它会在webpack打包配置时对这里指定的包文件自动的进行忽略，不对其进行打包处理。例如:

externals:  {
        lodash: "lodash"   // 这里我将lodash模块进行了移除
    },

• 通过这三个基本的配置后我们的库文件也就可以基本的大包出来了，但是一个完整的库文件的打包当然不仅仅只是这些配置，那么更多的详细的配置就了留给你大家在实际的使用中去依情况而定了。

---

2. TypeScript 的webpack打包配置，TypeScript的微软公司的出品，它能够使得我们编写的js代码更加的规范，但是由于我们的浏览器任然是只识别的js代码，所以我们编写出的.ts的代码在浏览器上实际是无法运行的，那么就需要我们使用webpack对他进行打包编译成浏览器可以运行的js的代码了：：
   这里我以一段简单的ts代码为例做简单的示范，由于担心大家完全不了解ts的语法，所以我也将这段简单的.ts代码附到这里:

import * as _ from "lodash"

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message
    }
    greet() {
        return _.join(["hello", this.greeting], "--")
    }
}

let greeter = new Greeter("world");
alert(greeter.greet())

• 这段.ts代码的含义其实很简单，就是创建一个打招呼的类，它里面有一个greet()方法，根据我们传递的参数值，使用lodash这个库函数的join()方法拼接出一个字符串返回。
• 那么我们应该如何来打包它呢? 其实这里没有什么新的配置，我们之前在说loader的时候说到了，loader实际可以理解成一些非通用的模块转化成浏览器可识别的代码模块，所以这里我们也仅仅是需要使用一个合适的loader来处理这g个.ts文件就可以了， TypeScript官方有一个 ts-loader模块可以帮助我们解决这个问题，基本配置如下:

module: {
        rules:[
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /(node_modules)/
            }
        ]
    }

• 所以这里也提供给大家一个思路，当我们在使用webpack打包文件的时候，发现有我们没有见过的文件类型的时候，我们可以考虑是否可以使用一些相应的loader来解决处理这中类型的文件。

---

好了，今天的webpack打包之旅就先到这里，下一篇文章我们先不说webpack，我们来谈一谈PWA这个玩意，因为我们之后需要介绍如何使用webpack来打包处理PWA,所以我们需要先提前给大家说一下这个东西.