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

最新推荐文章于 2024-03-24 00:00:00 发布

波帝伯爵

最新推荐文章于 2024-03-24 00:00:00 发布

阅读量985

点赞数 1

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

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

版权

本文介绍了webpack4.x中如何处理各种资源的打包，包括js模块的转换、图片资源的file-loader和url-loader使用、样式资源（如less）的处理，以及字体资源的加载。通过实例展示了配置过程和打包效果。

摘要由CSDN通过智能技术生成

文章目录

打包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 = []
  new Promise(() => {
    _copy = Array.from(arr)
    let str=''
    _copy.map(item=>{
      str+=item
    })
    console.log(str);
  })
  console.log(_copy)
}