webpack使用

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"]
}