ts|typescript ts 基础知识之用webpack打包ts代码 typescript|javascript|vue.js|webpack

一、基本配置： 1. 新建文件夹 webpack_js，在文件夹下建文件夹src，src下建文件index.ts

文章图片

2. 在终端打开文件夹，运行命令行，初始化package.json包管理工具

npm init -y

3. 安装依赖

cnpm i -Dwebpack webpack-cli typescript ts-loader

4. 根目录下新建webpack.config.js文件

//引入一个包 const path = require('path')//webpack中的所有配置信息 module.exports = { //运行模式，development开发环境 or production生产环境，此处先设为none mode: 'none', //值定入口文件 entry: "./src/index.ts",//指定打包文件所在目录 output: { path: path.resolve(__dirname, 'dist'), //指定打包文件的目录 filename: "bundle.js", //打包后文件的文件名 },// 指定webpack打包时要使用模块 module: { //指定要加载的规则 rules: [ { test: /\.ts$/, //指定规则生效的文件 use: 'ts-loader', //要使用的loader exclude: /node-modules/, //要排除的文件 } ] } }

5. 根目录下新建tsconfig.json文件

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

6. 在package.json文件的scripts选项中添加命令

"scripts": { ..... "build": "webpack" },

7. 终端执行命令

npm run build

如果出现budle.js，则打包成功
【ts|typescript ts 基础知识之用webpack打包ts代码】

文章图片

二、配置扩展（一）. 自动创建html文件，并将打包后代码引入
1. 安装依赖

cnpm i -D html-webpack-plugin

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

//引入html插件 const HTMLWebpackPlugin = require('html-webpack-plugin')//webpack中的所有配置信息 module.exports = { ... //配置webpack插件 plugins: [ new HTMLWebpackPlugin(), ] }

3. 运行 npm run build 命令，打包文件，出现index.html即为成功，若没出来，删掉dist文件夹重新输入打包命令试试

文章图片

注意：
a. 简单自定义新建html的标题属性

plugins: [
new HTMLWebpackPlugin({
title: '自定义title'
}),
]

b. 按模板结构新建html

plugins: [
new HTMLWebpackPlugin({
template: './src/index.html', //模板地址，‘./index.html’
}),
]

（二）. 打包后，自动在浏览器中预览，修改后自动刷新
1. 安装依赖

cnpm i -D webpack-dev-server

2. 在package.json文件的scripts选项中添加命令

"scripts": { ... "start": "webpack server --open" },

3. 执行命令运行，打包后浏览器会自动打开，修改后，会自动重新编译并在浏览器刷新

npm start

（三）.每次打包编译前自动清空dist文件夹，打包后重新生成文件
1. 安装依赖

cnpm i -D clean-webpack-plugin

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

//引入clean插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin')//webpack中的所有配置信息 module.exports = { ... //配置webpack插件 plugins: [ new CleanWebpackPlugin(), ... ] }

3. 下次执行npm run build时会先将dist文件夹清空
（四）. 在模块化编程项目中，设置引入文件默认扩展名
1. 修改webpack.config.js文件配置

//webpack中的所有配置信息 module.exports = { ... //用来设置引用模块 resolve: { extensions: ['.ts', '.js'], //扩展名 } }

（五）. 解决代码兼容性问题
1. 安装依赖

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

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

module.exports = { ... // 指定webpack打包时要使用模块 module: { //指定要加载的规则 rules: [ { test: /\.ts$/, //指定规则生效的文件 //要使用的loader,倒序执行 use: [ //配置babel { loader: 'babel-loader', //指定加载器 //设置babel options: { //设置预定义环境 presets: [ [ //指定环境的插件 "@babel/preset-env", //配置信息 { //要兼容的目标浏览器 targets: { "chrome":"58", //兼容到chrome58 "ie": "11", }, "corejs": "3", //指定corejs版本，package.json中可以查看 "useBuiltIns": "usage", //指定corejs的方式,usage按需加载 } ] ] } }, 'ts-loader' ], exclude: /node-modules/, //要排除的文件 } ] }, }

注意：
webpack打包时自动生成一个箭头函数包裹编译后的代码，在ie中执行会报错，解决方式为修改webpack.config.js文件配置：

//webpack中的所有配置信息 module.exports = { ... output: { ... //告诉webpack不使用箭头函数 environment: { arrowFunction: false, } }, }

附录： 1. package.json

{ "name": "webpack_js", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack server --open" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.18.9", "@babel/preset-env": "^7.18.9", "babel-loader": "^8.2.5", "clean-webpack-plugin": "^4.0.0", "core-js": "^3.23.5", "html-webpack-plugin": "^5.5.0", "ts-loader": "^9.3.1", "typescript": "^4.7.4", "webpack": "^5.73.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.3" } }

2. webpack.config.js

//引入一个包 const path = require('path') //引入html插件 const HTMLWebpackPlugin = require('html-webpack-plugin') //引入clean插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin') //webpack中的所有配置信息 module.exports = { //运行模式，development开发环境 or production生产环境，此处先设为none mode: 'none', //值定入口文件 entry: "./src/index.ts", //指定打包文件所在目录 output: { path: path.resolve(__dirname, 'dist'), //指定打包文件的目录 filename: "bundle.js", //打包后文件的文件名 //告诉webpack不使用箭头函数 environment: { arrowFunction: false, } }, // 指定webpack打包时要使用模块 module: { //指定要加载的规则 rules: [ { test: /\.ts$/, //指定规则生效的文件 //要使用的loader,倒序执行 use: [ //配置babel { loader: 'babel-loader', //指定加载器 //设置babel options: { //设置预定义环境 presets: [ [ //指定环境的插件 "@babel/preset-env", //配置信息 { //要兼容的目标浏览器 targets: { "chrome":"58", //兼容到chrome58 "ie": "11", }, "corejs": "3", //指定corejs版本，package.json中可以查看 "useBuiltIns": "usage", //指定corejs的方式,usage按需加载 } ] ] } }, 'ts-loader' ], exclude: /node-modules/, //要排除的文件 } ] }, //配置webpack插件 plugins: [ new HTMLWebpackPlugin(), // new HTMLWebpackPlugin({ // title: '自定义title' // template: './src/index.html' // }), new CleanWebpackPlugin() ], //用来设置引用模块 resolve: { extensions: ['.ts', '.js'], //扩展名 } }