如何使用 webpack 打包TypeScript 代码

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

第一步：初始化项目

• 在终端使用 npm init -y 对项目进行初始化，会产生一个 package.json 文件。

第二步：下载相关依赖

• 在终端中输入以下命令下载 webpack、webpack-cli、typescript、ts-loader 。

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

第三步：对 Webpack 进行配置

• 在根目录新建一个名为 webpackconfig.js 的文件。

• 输入以下内容：

  const path = require('path');
  
  // webpack 中的所有的配置信息都应该写在 module.exports 中
  module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件的目录
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    },
    // 指定 webpack 打包时要使用模块
    module: {
      // 指定要加载的规则
      rules: [
        {
          // test 指定的是规则生效的文件
          test: /\.ts$/,
          // 要使用的 loader
          use: 'ts-loader',
          // 要排除的文件
          exclude: /node_modules/
        }
      ]
    }
  }
  

第四步：对 TS 编译进行配置

• 在根目录新建一个名为 tsconfig.json 的文件。

• 输入以下内容：

  {
    "compilerOptions": {
      "module": "ES6",
      "target": "ES6",
      "strict": true
    }
  }
  

第五步：配置 webpack 的指令

• 在 package.json 文件中的 script 项中加入"build": "webpack"

解决上面遗留的问题

问题一：每次编译完成都得重新在 HTML 中引入一次。

解决方案：

• 使用插件 html-webpack-plugin 。

  • 在终端输入 npm i -D html-webpack-plugin 下载需要使用的插件。

  • 对 webpack 进行配置

    // webpackconfig.js
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      ...
      plugins: [
        new HtmlWebpackPlugin()
      ]
    }
    

  • 这样每次打包的时候就会自动生成一个 HTML 文件，并将编译出来的 js 文件引入到 HTML 中。

• 对于 webpack 自动生成的 HTML 文件可以自定义里面的内容。

  // webpackconfig.js
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    ...
    plugins: [
      new HtmlWebpackPlugin({
        "title": "这是一个自定义的标题。"
      })
    ]
  }
  

• 对于 webpack 自动生成的 HTML 文件也可以自定义想要的模板。

  // webpackconfig.js
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    ...
    plugins: [
      new HtmlWebpackPlugin({
        "template": "./src/index.html"	// 模板文件路径
      })
    ]
  }
  

问题二：每次编译都是新文件覆盖旧文件，但是希望它把原文件删除并且重新创建文件。

解决方案：

• 使用插件 clean-webpack-plugin 。

  • 在终端输入 npm i -D clean-webpack-plugin 下载需要使用的插件。

  • 对 webpack 进行配置

    // webpackconfig.js
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    module.exports = {
      ...
      plugins: [
        new CleanWebpackPlugin()
      ]
    }
    

问题三：webpack 不知道哪些文件可以作为模块引入，所以在引入 .ts 模块的时候会报错

解决方案

• 配置 webpack.config.json 。

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

使项目可以兼容更多的浏览器

• babel 可以使 TS 转换为一些老浏览器支持的语法。

• 使用步骤：

  • 使用 npm i -D @babel/core @babel/preset-env babel-loader core-js

  • 修改 webpack.config.js 的配置：

    module: {
        // 指定要加载的规则
    rules: [
          {
            // test 指定的是规则生效的文件
            test: /\.ts$/,
            // 要使用的 loader
            use: [{
              // 指定要用的加载器
              loader: "babel-loader",
              // 设置 babel
              options: {
                // 设置预定义环境
                preset: [
                  [
                    // 指定环境的插件
                    "@babel/preset-env",
                    // 配置信息
                    {
                      // 要兼容的目标浏览器
                      targets: {
                        "chrome": "88"
                      },
                      // 指定 corejs 的版本
                      "corejs": "3",
                      // 使用 corejs 的方式
                      "useBuiltIns": "usage"	// 表示按需加载
                    }
                  ]
                ]
              } 
            },'ts-loader'],
            // 要排除的文件
            exclude: /node_modules/
          }
        ]
      }
    

webpack 在打包时会创建一个立即执行的箭头函数，导致 ie11 不兼容

解决方案：

• 设置 webpack.config.js 的配置。

  output: {
      path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
      // 告诉 webpack 不使用箭头函数
    	environment: {
        arrowFunction: false	// 关闭 webpack 的箭头函数，可选
      }
    },