webpack打包ts
npm init -y 对项目进行初始化
生成一个package.json文件
下载依赖
package.json文件里面有下载的依赖
cnpm i -D webpack webpack-cli typescript ts-loader
编写webpack的配置文件
创建一个叫webpack.config.js的文件
写入配置信息
//引入一个包
const path =require('path');
// webpack中的所有配置信息都应该写在moudle.exports中
module.exports={
entry:"./src/index.ts",//指定入口文件
output:{ //指定打包文件所在目录
path:path.resolve(__dirname,'dist'), //指定打包文件所在的目录
filename:"bundle.js" //打包后的文件
},
//指定webpack打包时要使用的模块
module:{
//指定要加载的规则
rules:[
{
test:/\.ts$/, //test指定的是规则生效的文件
use:'ts-loader', //要使用的loader
exclude:/node-moudules,//要排除的文件
}
]
}
}
编写tsconfig.json文件
{
"compilerOptions": {
"module": "ES6", //模块化规范
"target": "ES6", //要编译成的js的版本
"strict": true, //全部的严格模式
}
}
修改一下package.json中的配置
{
"name": "pack",
"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.4.4",
"typescript": "^5.2.2",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
}
}
"build":"webpack" 使用build调用webpack
最后生成的文件夹是这样的
在控制台 npm run build 来打包
看是否生成dist文件夹来确认是否成功打包
自动引入插件
npm i -D html-webpack-plugin
下载完再package.json中就能看到这个依赖了
下载完依赖还要引入到webpack.config.js中
// 引入html插件
const HTMLWebpackPlugin=require('html-webpack-plugin')
配置文件让他生效
// 配置webpack插件 html生效
plugins:[
new HTMLWebpackPlugin(),
]
生成的html文件可以自定义title
// 配置webpack插件 html生效
plugins:[
new HTMLWebpackPlugin({
title:"自定义的title"
}),
]
网页实时热加载插件
npm i -D webpack-dev-server
然后再package文件中配置个start热加载
"start": "webpack serve --open chrome.exe"
出现Cannot GET /chrome.exe去掉chrome.exe 还有问题百度
如果提示mode有问题可以在entry的入口文件上面加上 mode:"development",
这样就可以在终端输入npm start 来打开网页
每次删除dist目录下旧文件引入新文件clean
下载插件
npm i -D clean-webpack-plugin
引入clean插件
文件的引用
在webpack.config.js中
resolve:{ //用来设置引用模块
extensions:['.ts','.js'] //什么后缀的文件可以被引用
}
配置可以被引用的模块
babel插件
tsconfig.json中target编译成js的版本 浏览器出现不兼容问题需要babel插件解决
下载babel
npm i -D @babel/core @babel/preset-env babel-loader core-js
修改配置文件