江苏核酸检测机构_营销推广有哪些步骤_技能培训有哪些科目_百度怎么推广自己的视频

1.初始化项目并安装依赖

npm init -y 初始化一个新项目

使用npm i -d webpack webpack-cli typescript ts-loader 给项目加上webpack的相关包(webpack工具和webpack命令行工具)

webpack              webpack工具
webpack-cli         webpack命令行工具

typescript             TS包

ts-loader               将ts和webpack工具整合的包

2.进行webpack和typescript的基本配置

webpack

新建一个webpack.config.js文件 这个文件是webpack在项目中的配置文件

// nodejs的模块 帮助我们拼接路径
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$/, //匹配所有的以ts结尾的文件use: "ts-loader", //用tsloader来处理以ts结尾的文件exclude: /node-modules/, //排除文件},],},
};

tsconfig.json

新建一个tsconfig.json文件 这个文件是typescript在项目中的配置文件

{"compilerOptions": {//编译器的选项// target 用来指定ts编译为js的版本"target": "es6","module": "es6","strict": true}
}

 package.json

在package.json中配置webpack的打包命令

{"name": "part2","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"ts-loader": "^9.5.1","typescript": "^5.7.2","webpack": "^5.97.1","webpack-cli": "^6.0.1"}
}

尝试打包一下

可以发现我们的打包是成功的，并且在dist目录中出现了bundle.js文件,这说明使用webpack打包 最基本的功能已经处理完了。