前端必备技能 webpack - 5. webpack处理JS资源

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。
 
点这里查看 webpack 系列文章目录
 
博客中的代码位于 码云Git仓库，如有需要可自行前往下载。

前端必备技能 webpack - 5. webpack处理JS资源

  webpack 默认就会对 js 资源进行处理，我们这里只需要对其进行压缩等操作即可。

一、 兼容性处理

  因为部分浏览器并不兼容 es6 语法，而我们在开发时经常会使用到各种新特性，所以就需要我们对各种特性进行兼容性处理，现在我们可以直接借助 webpack 来完成这项工作，主要有以下三种方式：

1.1 兼容基本语法

  老规矩，先下包，这里需要使用 babel 的三个包：

npm i babel-loader @babel/preset-env @babel/core -D

  我们新建一个 JS 的文件，并利于 es6 语法写一些低版本浏览器不能兼容的内容：

// index.html

const fn = () => {
   
    console.log("index.js");
}

new Promise(resolve => {
   
    setTimeout(() => {
   
        resolve('hello')
    }, 2000)
}).then(res => {
   
    console.log(res)
})

  修改配置文件：

// webpack.config.js

module: {
   
rules: