使用webpack打包typescript

傷城~ 2023-01-18 14:27 244阅读 0赞

浏览器运行我们的代码时，只能识别js，如果用ts开发，我们必须要先将ts转为js

这时候就用到webpack、babel、core.js

**加载顺序：**

先通过webpack将ts转为js→babel将生成的js新语法转为旧语法→core添加新的api以适应更就旧版本

**配置步骤如下：**

进入项目根目录，执行命令 `npm init -y`，创建package.json文件

下载构建工具

配置webpack

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安装了7个包:

*  webpack：构建工具webpack
 *  webpack-cli：webpack的命令行工具
 *  webpack-dev-server：webpack的开发服务器
 *  typescript：ts编译器
 *  ts-loader：ts加载器，用于在webpack中编译ts文件
 *  html-webpack-plugin：webpack中html插件，用来自动创建html文件
 *  clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录

配置babel

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

*  @babel/core：babel的核心工具
 *  @babel/preset-env：babel的预定义环境
 *  @babel-loader：babel在webpack中的加载器
 *  core-js：core-js用来使老版本的浏览器支持新版ES语法（如新的api在就浏览器中不存在的问题）

详细文件配置如下：

根目录下创建webpack的配置文件`webpack.config.js`：

const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    
    module.exports = {
       optimization:{
           minimize: false // 关闭代码压缩，可选
       },
    
       entry: "./src/test.ts",//入口文件
    
       devtool: "inline-source-map",
    
       devServer: {
           contentBase: './dist'
       },
    
       output: {//打包后输出的路径，和打包后的文件名
           path: path.resolve(__dirname, "dist"),
           filename: "bundle.js",
           environment: {
               arrowFunction: false // 关闭webpack的箭头函数，可选
           }
       },
    
       resolve: { //设置可以当成模块被引入的文件名
           extensions: [".ts", ".js"]
       },
    
       module: {
          rules: [
              {
                  test: /\.ts$/,
                  use: [
                      {//配置babel，使得转化后的js代码适应更多的浏览器
                          loader: "babel-loader",
                          options:{
                              presets: [
                                  [
                                      "@babel/preset-env",
                                      {
                                          "targets":{ //设置兼容的浏览器最低版本
                                              "chrome": "58",
                                              "ie": "11"
                                          },
                                          "corejs":"3", //使低版本浏览器读取高版本的js的api
                                          "useBuiltIns": "usage" //按需加载core.js
                                      }
                                  ]
                              ]
                          }
                      },
                      {
                          loader: "ts-loader",
    
                      }
                  ],
                  exclude: /node_modules/
              }
          ]
      },
    
       plugins: [
           new CleanWebpackPlugin(),//每次打包都清除上一次打包的文件
           new HtmlWebpackPlugin({ //自定义生成的html文件
               title:'TS测试'
           }),
       ]
    }

根目录下创建tsconfig.json:

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

修改package.json添加如下配置:

{
       ...
       "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1",
           "build": "webpack",
           "start": "webpack serve --open chrome.exe" 
            //运行npm run start时，就是运行webpack serve
            //--open chrome.exe运行成功后自动打开谷歌浏览器
       },
       ...
    }

项目使用

在src下创建ts文件，并在并命令行执行`npm run build`对代码进行编译；

或者执行`npm start`来启动开发服务器；

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack与TypeScript

文章目录 * 引入 * 使用 * 问题引入 TypeScript是最近一段时间非常火的一个JavaScript的超集。说是超集，那么自然Type...

野性酷女/ 2024年04月18日 12:39/ 0 赞/ 65 阅读

相关 webpack打包原理(webpack打包原理优化)

fis打包和webpack打包的区别定位不同，webpack定位是一个打包工具，模块化。其实自动化的工具更好用gulp之类解决。fis3直接定位为一个全功能工具，官方文

今天药忘吃喽~/ 2023年09月26日 14:37/ 0 赞/ 9 阅读

相关 webpack 深入浅出分析之打包 JS、ES6 和 Typescript

一、webpack 打包 JS 文件 1. 通过 `npm install webpack` 命令可以下载 `webpack`，通过 `npm install webp

水深无声/ 2023年02月11日 11:30/ 0 赞/ 7 阅读

相关使用webpack打包typescript

浏览器运行我们的代码时，只能识别js，如果用ts开发，我们必须要先将ts转为js 这时候就用到webpack、babel、core.js 加载顺序：先通过web

傷城~/ 2023年01月18日 14:27/ 0 赞/ 245 阅读

相关 webpack不打包mysql_简单使用webpack打包文件的实现

简单使用webpack打包文件的实现发布时间：2020-09-07 21:57:05 来源：脚本之家阅读：80 作者：逸轩没有安装node的同学请先安装node

快来打我*/ 2022年11月06日 00:03/ 0 赞/ 270 阅读

相关使用webpack打包编译TypeScript代码

TypeScript打包 webpack整合通常情况下，实际开发中我们都需要使用构建工具对代码进行打包； TS同样也可以结合构建工具一起使用，下边以webpac

港控/mmm°/ 2022年10月10日 13:57/ 0 赞/ 318 阅读

相关 Webpack打包

1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sc

爱被打了一巴掌/ 2022年07月12日 09:54/ 0 赞/ 337 阅读

相关 webpack打包

进入工作空间,npm run build,打一下生产的包打包完之后,会生成一个dist目录 ![70][] static是静态文件的存放地址在config目录

╰半夏微凉°/ 2022年05月09日 05:12/ 0 赞/ 369 阅读

相关 WebPack打包

一、用webpack打包新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） !

一时失言乱红尘/ 2021年11月16日 23:40/ 0 赞/ 618 阅读

相关 webpack typescript使用eslint

1、下载 cnpm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

妖狐艹你老母/ 2021年07月24日 16:41/ 0 赞/ 533 阅读