webpack基础

为什么需要打包工具?

vue框架, ES6模块化标签, less/sass等代码想要在浏览器运行的时候必须通过编译成浏览器能识别的JS, Css等语法才能运行.
其他打包工具: vite, Gulp, Grunt等.

功能介绍

• 开发模式: 仅能编译JS中ES6模块
• 生产模式: 能编译JS中的ES6语法, 还能压缩代码.

处理图片资源:

webpack提供本身优化, 不需要下载额外插件.

module:{
rules:[
{
  test:/\.(png|jpe?g|gif|webp|svg)$/,
  type:"asset"
  parser:{
    dataUrlCondition:{
      // 小于10kb的图片转base64
      // 优点: 减少请求资源, 缺点: 体积会更大
      maxSize:10 * 1024,
    }
  }
}
]
}

修改输出文件目录:

js在js目录中, 图片在图片目录中.

module:{
rules:[
{
  test:/\.(png|jpe?g|gif|webp|svg)$/,
  type:"asset"
  parser:{
    dataUrlCondition:{
      // 小于10kb的图片转base64
      // 优点: 减少请求资源, 缺点: 体积会更大
      maxSize:10 * 1024,
    }
  },
  generator:{
  //输出图片名称
  //[hash:10]取前10位
  filename: "static/images/[hash:10][ext][query]"
}
]
}

自动清空上次打包的内容:

output:{
  // 所有文件输出路径
  // __dirname代表当前文件及目录
  path:path.resolve(__dirname, "dist"),
  // 入口文件打包输出文件名
  filename:"static/js/main.js",
  // 自动清空上次打包的内容
  clean:true
}

---

eslint介绍:

: 检测js和jsx语法的工具, 可以配置各项情况.
写eslint配置文件, 里面写上各种rules规则, 将来运行eslint时就会以写的规则对代码进行检查.

配置文件:

• .eslint.js (创建新文件, 位于根目录)
• package.json中eslintConfig (不需要创建文件, 原有文件中写)

---

babel(编译工具!!)

js编译器, 将ES6语法编写的代码转化为向后兼容的js语法, 以便能够运行在当前和旧版本的浏览.