前端之使用webpack打包TS

使用webpack打包TS

一、配置

一、配置

1.新建入口js

src/main.ts

document.write("帅哥,看过来")
1

2.新建index页面

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack & TS</title>
  </head>
  <body></body>
</html>
1
2
3
4
5
6
7
8
9
10

3.新建build/webpack.config.js

webpack相关配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve(dir) {
  return path.resolve(__dirname, '..', dir)
}

module.exports = {
  // 模式: 生产 开发 
  mode: isProd ? 'production' : 'development',
  // 配置模块的入口
  entry: {
    // 统一的主入口目录
    app: './src/main.ts'
  },

  // 打包后的内容放到dist中,文件名为entry内的 —— app + 8位hash值 + .js 
  output: {
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js'
  },

  module: {
    rules: [
      // 针对src内的ts和tsx文件进行编译处理操作
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  },

  plugins: [
    // 清理以前打包的js
    new CleanWebpackPlugin({
    }),

    // 这里是针对public内的html进行打包
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  resolve: {
    // 针对这些文件进行处理(引入'.ts', '.tsx', '.js'可以不写扩展名)
    extensions: ['.ts', '.tsx', '.js']
  },
  // 代码问题,提示信息
  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  // 启动后在浏览器的 对应主机名 对应端口打开
  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8081,
    open: true
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

4.命令行创建package.json文件

在node开发中使用npm init会生成一个pakeage.json文件，用来记录这个项目的详细信息的，如: 项目开发中用到的包，以及项目的详细信息等。便于版本迭代和项目移植。在误删了某个依赖包或项目移植后，可以使用
npm install 根据package.json安装依赖。

npm init -y
1

npm init --yes|-y ：作用同npm init，可以偷懒不用一直按enter。

5.生成ts自动编译配置文件

tsc --init
1

初始化ts自动编译为js（内容不做修改）

6.下载相关依赖包

npm i -D typescript@4.0.5
npm i -D webpack@4.41.5 webpack-cli@3.3.10
npm i -D webpack-dev-server@3.10.2
npm i -D html-webpack-plugin@4.5.0 clean-webpack-plugin@3.0.0
npm i -D ts-loader@8.0.11
npm i -D cross-env@7.0.2
1
2
3
4
5
6

// 下方命令, 对html打包清除打包内容
npm i -D html-webpack-plugin clean-webpack-plugin

7.配置打包命令

在 package.json 的scripts内配置打包命令
dev是生产环境
build是开发环境

"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
1
2

8.运行和打包

npm run dev
npm run build
1
2

运行结果
在这里插入图片描述
打包结果：

在这里插入图片描述

相关阅读:
【题目精刷】2023禾赛-FPGA
三相PWM整流器滞环电流控制MATLAB仿真模型
idea专业版和idea社区版整合Tomcat，并将war包部署
MATLAB深度学习工具箱的使用技巧
二叉搜索树--详细实现过程
vue 组件公共的方法
VPP目的MAC检查
Linq to SQL语句之DataContext
稀疏数组及其应用
波束形成,通过matlab仿真不同参数的波束形成以及旁絆级

原文地址：https://blog.csdn.net/weixin_46372074/article/details/125530598