使用webpack打包typescriptinit-ypackage.jsonbuildconfigrequiremoduleexportsoutputentryexclude
Posted web半晨
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用webpack打包typescriptinit-ypackage.jsonbuildconfigrequiremoduleexportsoutputentryexclude相关的知识,希望对你有一定的参考价值。
目录
1、初始化项目
npm init
npm init -y
两个命令都是对项目进行初始化操作,对包进行管理。
-y的含义是yes的意思,作用是init的时候省去了敲回车的步骤,直接生成默认的package.json文件。
npm init
npm init -y
2、安装webpack相关的开发依赖
install
安装的意思。
-D是开发依赖的意思。
webpack:webpack的包。
webpack-cli:webpack的命令行工具。
typescript:ts核心包。
ts-loader:webpack和typescri加载器,也是桥梁或整合的作用。
npm install -D webpack webpack-cli typescript ts-loader
3、根目录下创建webpack的配置文件webpack.config.js
// 引入path包
// 作用:拼接路径
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$/,
// 要是用的loader
// 使用ts-loader去处理.ts文件
use: 'ts-loader',
// 要排除的文件
exclude: /node-modules/
]
4、根目录下创建tsconfig.json文件,并进行配置,配置可根据需求自行添加
"compilerOptions":
"module": "ES2015",
"target": "ES6",
"strict": true
5、修改package.json
在package.json文件中添加
"build": "webpack"
打包命令。
"name": "demo_06_webpack_typescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1",
"build": "webpack"
,
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
"ts-loader": "^9.2.6",
"typescript": "^4.5.4",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
6、运行打包命令
第一步
在src下创建ts文件。
第二步
执行
npm run build
命令,对代码进行编译。
npm run build
或者执行
npm start
来启动开发服务器。
npm start
7、完整代码(待上传)
以上是关于使用webpack打包typescriptinit-ypackage.jsonbuildconfigrequiremoduleexportsoutputentryexclude的主要内容,如果未能解决你的问题,请参考以下文章