一、新建一个新项目的目录就可以
二、新建一个package.json应用命令npm init -y （只要用NPM就要用package.json管理项目里有可以有依赖、有哪些命令）
三、安装使用Webpack 的依赖npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
package.json里出现以下这段代码证明安装成功
"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"
}
共安装了7个包
o webpack
§ 构建工具webpack
o webpack-cli
§ webpack的命令行工具
o webpack-dev-server
§ webpack的开发服务器
o typescript
§ ts编译器
o ts-loader
§ ts加载器，用于在webpack中编译ts文件
o html-webpack-plugin
§ webpack中html插件，用来自动创建html文件
o clean-webpack-plugin
§ webpack中的清除插件，每次构建都会先清除目录
四、新建一个webpack.config.js配置文件
const path = require('path');
//webpack中的所有配置信息都应该写在这里
module.exports = {
//指定入口文件 src是源码目录，程序的主文件
entry: "./src/index.ts",
output: {
//打包文件所在目录,__dirname拼路径
path: path.resolve(__dirname, 'dist'),
//打包后文件的名字
filename: "bundle.js"
},
//指定webpack打包时要使用的模块
module: {
//指定要加载的规则，rules数据可以指定多个规则
rules: [{ //指定规则生效的文件
test: /\.ts$/,
//要使用的loader
use: 'ts-loader',
//排除的文件不需要编译的
exclude: /node_modules/
}]
},
//配置webpack插件
plugins: [
new HtmlWebpackPlugin({
// title: '自定义title',
template:"./src/index.html"
})
]
}
五、创建一个ts编译规范tsconfig.json
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
六、可以通过npm run bulid 可以打包，如果出现在dist目录代表打包成功
