一、安装依赖
npm install webpack webpack-cli ts-loader -D
二、 配置
const path = require('path')
module.exports = {
entry:'./src/index.ts', //
output:{
path:path.resolve(__dirname,'dist'),
fileName:'bundle.js'
},
module:{
rules:[
{
test:/\.ts$/,
use:'ts-loader',
exclude:/node-modules/
}
]
}
}
二、 html-webpack-plugin 动态创建html
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugin({
title:'这是自定义标题'
})
]
二、 webpack-dev-server 开启服务
cnpm install webpack-dev-server -D
package.json
"scripts": {
"dev":"webpack server --open chrome.exe"
},
三、 clean-webpack-plugin 清除dist目录
cnpm install clean-webpack-plugin -D
webpack.config.js
const {cleanWebpackPlugin} = require('clean-webpack-plugin')
plugins:[
new cleanWebpackPlugin()
]
三、 resolve用来设置引用模块
在文件中通过import 或者export 导出、导入文件报错，配置下面的选项
webpack.config.js
resolve:{
extensions:['.ts','.js']
}
四、配置babel（兼容性）
cnpm install -D @babel/core @babel/preset-env babel-loader core-js
module:{
rules:[
{
test:/\.ts$/,
use:[
{
// 指定加载器
loader:'babel-loader',
//设置babel
options:{
presets:[
[
// 指定环境的插件
"@babel/preset-env",
{
// 要兼容的目标浏览器
targets:{
"chrome":58,
"ie":11
},
// 指定corejs的版本
"corejs":3,
// 使用corejs的方式usage，表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader',
],
exclude:/node-modules/
}
]
},
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const path = require('path')
module.exports = {
mode:'development',
entry:'./src/index.ts',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js',
environment:{
arrowFunction:false // webpack 打包默认使用箭头函数，要不想使用，就直接false,否则生成的箭头函数，在ie不兼容会报错
}
},
module:{
rules:[
{
test:/\.ts$/,
use:[
{
// 指定加载器
loader:'babel-loader',
//设置babel
options:{
presets:[
[
// 指定环境的插件
"@babel/preset-env",
{
// 要兼容的目标浏览器
targets:{
"chrome":58,
"ie":11
},
// 指定corejs的版本
"corejs":3,
// 使用corejs的方式usage，表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader',
],
exclude:/node-modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({
// title:'这是自定义标题'
template:'./src/index.html'
}),
new CleanWebpackPlugin()
],
// 用来设置引用模块
resolve:{
extensions:['.ts','.js']
}
}
