1.安装webpack 和webpack-cli
2.初始化package.json
3.创建webpack-config.js文件
const path = require('path')
// 引入html页面插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// clean-webpack-plugin帮我们清除打包之后dist目录下的其他多余无用代码
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.ts',
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js'
},
mode: 'development',
module: {
// 指定要加载的规则
rules: [
{
// test指定是规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
{
// 指定加载器
loader: 'babel-loader',
// 设置babel
options: {
presets: [
// 指定环境的插件 //根据环境自动转换
['@babel/preset-env',
// 配置信息
{
targets: {
"chrome": "88",
"ie": "10"//兼容ie10
},
// 是否开启按需加载”usage“//开启按需加载,默认值false(全局引入)
"useBuiltIns": "usage",
"corejs": 3,
}
]
]
}
}, 'ts-loader'
],
exclude: /node_modules/
},
]
},
// 配置Webpack插件
plugins: [
new HtmlWebpackPlugin(
{
template: './src/index.html',
filename: 'index.html',
}
),
new CleanWebpackPlugin()//加上这个配置会清空打包目录中的文件
],
// 依赖文件
resolve: {
extensions: ['.ts', '.js']
}
}
总体建构如下