webpack4.x最佳实践-4.常用loader

最新推荐文章于 2024-03-11 22:46:43 发布

VIP文章波帝伯爵

最新推荐文章于 2024-03-11 22:46:43 发布

阅读量952

点赞数 1

分类专栏：前端学习笔记前端工程化文章标签： webpack

本文链接：https://blog.csdn.net/hyb2012/article/details/91381678

版权

文章目录

打包js模块
打包图片资源
打包样式资源
打包字体资源

在初始配置下webpack只能处理js模块，但是我们开发过程中会引入很多js之外的模块，要想正确的打包，我需需要引入响应的loader进行处理

打包js模块

打包js模块时要顾及到浏览器的兼容性，es6或更高版本的语法有些浏览器可能会不兼容，我们需要引入bable把高级语法翻译为浏览器能解释的语法，比如数组的map方法、flatmap方法、import引入模块等。

涉及到三个基本的npm包：npm install -D babel-loader @babel/core @babel/preset-env

// index.js

var root = document.getElementById('root')

var btn = document.createElement("button")
btn.innerHTML = '点我啊'
root.appendChild(btn)

btn.onclick = function onBtnClick(params) {
  const arr = ['a', 'b', 'c', 'd']
  let _copy = []
  n