文章目录
- 第一步 npm init -y
- 第二步 npm i -D webpack webpack-cli typescript ts-loader
- 第三步 创建webpack.config.js配置文件
- 第四步 创建一个tsconfig.json配置文件
- 第五步 在package.json文件的scripts中 加入"build": "webpack"
- 第六步 控制台输入指令 npm run build (基本创建完成)
- 第七步 npm i -D html-webpack-plugin(帮助我们自动生成html文件)
- 第八步 在webpack.config.js中引入html文件 并且配置webpack属性
- 第九步 npm i -D webpack-dev-server(帮助项目直接运行) 并在package.json文件中配置start属性
- 第十步 npm i -D clean-webpack-plugin (自动清除dist文件)
- 第十一步 在webpack.config.js文件中引入 并在plugin中配置
- 第十二步 在webpack.config.js文件中使用resolve设置引入模块
- 第十三步 npm i -D @babel/core @babel/preset-env babel-loader core-js(解决兼容性问题)
- 第十四步 在webpack.config.js中进行配置 找到module中的rules将其中use属性修改为数组,在output中设置environment中配置环境
第一步 npm init -y
npm init -y
生成一个package.json文件
第二步 npm i -D webpack webpack-cli typescript ts-loader
npm i -D webpack webpack-cli typescript ts-loader
下载所需依赖，并在package.json中devDependencies中出现
第三步 创建webpack.config.js配置文件
// 引入一个包
const path = require('path');
const { webpack } = require('webpack');
// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
// 定义环境变量
mode:'development',
// 指定入口文件
entry:'./src/index.ts',
// 指定打包文件所在的目录
output:{
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后文件的名字
filename: 'bundle.js',
},
// 指定webpack打包时要使用的模块
module:{
// 指定要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: 'ts-loader',
// 要排除的文件
exclude: /node-modules/
}
]
}
};
第四步 创建一个tsconfig.json配置文件
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
第五步 在package.json文件的scripts中 加入"build": “webpack”
{
"name": "twst",
"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.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}