第一步初始化:
npm init -y //生成package.json
第二步 安装插件:
npm i -D webpack webpack-cli typescript ts-loader
第三步 webpack.config.js文件配置:
//引入一个包
const path = requier('path');
//引入html插件
const HTMLWebpackPlugin = ('html-webpack-plugin');
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//webpack中的所有的配置信息都应该写在module.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-modules/, //要排除的文件
}
]
},
//配置webpack插件
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
//title:"这是一个自定义的title"
template: './src/index.html'
})
],
//用来设置引用模板
resolve:{
extensions: ['.ts','.js']
}
}