Webpack构建ts项目

2024年08月09日 851 字大概 4 分钟

介绍webpack构建ts项目，备忘。

Webpack构建

安装依赖：

# 安装 TypeScript 编译器和 loader
npm install --save-dev typescript ts-loader  
# 构建工具webpack webpack的命令行工具; webpack的开发服务器
npm i -D webpack webpack-cli webpack-dev-server
# webpack中html插件，用来自动创建html文件; webpack中的清除插件，每次构建都会先清除目录
npm i -D html-webpack-plugin clean-webpack-plugin
# 生产环境的webpack
npm i -D webpack-merge

由于不同环境下需要的webpack配置不同，我们建立build文件夹存放配置文件。

根据项目需求配置基本配置webpack.base.config.js

import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

// eslint-disable-next-line no-undef
module.exports = {
  // 指定入口文件
  entry: './static/index.ts',

  // 指定打包文件所在目录
  output: {
    // eslint-disable-next-line no-undef
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    environment: {
      arrowFunction: false, // 关闭webpack的箭头函数，可选
    },
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  // 用来设置引用模块
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },

  // 配置插件
  plugins: [
    new HtmlWebpackPlugin({
      title: "C4iN's MVVM Test",
      template: './static/index.html',
    })
  ]

};

开发环境配置webpack.dev.config.js

// eslint-disable-next-line @typescript-eslint/no-require-imports,no-undef
 const { merge } = require('webpack-merge');
// eslint-disable-next-line @typescript-eslint/no-require-imports,no-undef
 const baseConfig = require('./webpack.base.config');

// eslint-disable-next-line no-undef
module.exports = merge(baseConfig, {
  // 开发模式使用，方便查错误
  mode: 'development',
  devtool: "inline-source-map",
  // 配置服务器
  devServer: {
     static: './dist',
  },

})

生产环境配置webpack.pro.config.js：

// eslint-disable-next-line @typescript-eslint/no-require-imports,no-undef,@typescript-eslint/naming-convention
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// eslint-disable-next-line no-undef
module.exports = {
  mode: 'production',
  plugins: [new CleanWebpackPlugin()],
};

接下来配置package.json

"script" : {
    "start": "webpack serve --open --config build/webpack.dev.config.js",
    "build": "webpack --config build/webpack.prod.config.js"
},

编写index.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <h1> text </h1>
  </body>

  <script>

  </script>
</html>

编写index.ts：

const h = document.querySelector("h1")
if (h) {
  h.textContent = "Success"
}

运行start/build命令：

> build
> webpack --config build/webpack.prod.config.js

asset index.html 184 bytes [emitted]
asset bundle.js 94 bytes [emitted] [minimized] (name: main)
./static/index.ts 96 bytes [built] [code generated]
webpack 5.93.0 compiled successfully in 1584 ms

打开生成的html文件：

Babel配置

使用babel来对代码进行转换以使其可以兼容到更多的浏览器。

安装依赖：

# babel 的核心工具
npm i -D @babel/core 
# babel 的预定义环境
npm i -D @babel/preset-env 
# babel 在webpack中的加载器
npm i -D babel-loader 
# core-js 用来使老版本的浏览器支持新版ES语法
npm i -D core-js

修改webpack.base.config.js配置文件

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

参考:

【TS】快速上手（五）使用webpack配置TS项目 - 掘金 (juejin.cn)

生产环境 | webpack 中文文档 (docschina.org)