webpack常用插件
//添加html一同打包使用到插件 HtmlWebpackPlugin
//每次更改js内容都需要打包才能看到效果 所以使用插件 webpack-dev-server
//babel es6 转 es5 @babel/core @babel/preset-env babel-loader
npm init -y //初始化 生成package.json
npm install *** --save-dev //下载devDependencies中的依赖
package.json配置
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
"devDependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"babel-loader": "^9.1.2",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
}
webpack配置文件 webpack.config.js
//Common.js语法
const path = require('path');//路径模块
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development',//模式
entry:path.join(__dirname,'src','index.js'),//开始处理的文件地址,//__dirname指当前的文件所在的目录
output:{//打包好的文件放到指定路径
path:path.join(__dirname,'dist'),
filename:'bundle.js'
},
//设置模块
module:{
rules:[{
test:/\.js$/,//判断是不是js文件
loader:'babel-loader',//是的话使用babel转换
include:path.join(__dirname,'src'),//js包括的文件夹
exclude:/node_modules/, //不包括的文件夹
}]
},
plugins:[
new HtmlWebpackPlugin({
template:path.join(__dirname,'src','index.html'),//模板，
filename:'index.html',//输出的文件名称
})
],
devServer:{
port:8081,//端口
static:path.join(__dirname,'dist'),//静态资源文件夹
}
}
babel配置文件 .babelrc
//babel配置文件
{
//预设：babel一些列插件的集合
"presets": ["@babel/preset-env"]
}
