前端必备技能 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: [
{
test: