前端开发中，图片处理是一项非常重要的工作，但在 ES6 中，直接使用图片是不太方便的。这时候我们可以使用 Babel 编译 ES6 代码，并通过 Webpack 打包后再使用图片。
在本文中，我们将介绍如何使用 Babel 编译 ES6 代码时支持图片处理，供读者参考和学习。
安装 Babel 和 Webpack
要使用 Babel 编译 ES6 代码，我们需要先安装 Babel 和 Webpack。
npm install --save-dev @babel/core @babel/cli @babel/preset-env webpack webpack-cli
安装图片处理的 loader
为了处理图片，我们还需要安装相应的 loader。
npm install --save-dev file-loader url-loader
配置 babel.config.js
在项目目录下创建 babel.config.js 文件，并配置如下内容：
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
};这里只是基本的配置，如果需要使用其他插件或 preset，请根据自己的需求进行配置。
配置 webpack.config.js
在项目目录下创建 webpack.config.js 文件，并添加以下代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
--------- --------------
----------- ---------
-
-
-
-
-
-
--这里我们使用 url-loader 和 file-loader 处理图片，这两个 loader 都是支持的，可以根据需求进行选择。
在 ES6 中使用图片
在 ES6 的代码中使用图片时，可以直接 import：
import imgURL from './images/1.jpg'
const img = document.createElement('img')
img.src = imgURL
document.body.appendChild(img)这里的 imgURL 表示的就是图片的路径，路径的图片将会被自动打包到 dist 目录下的 assets 目录中。
结论
本文介绍了如何使用 Babel 编译 ES6 代码时支持图片处理，希望对读者有所启发和帮助。使用 Babel 编译 ES6 代码可以提高开发效率和代码可维护性，而图片处理也是前端开发中不可缺少的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b0d889babaf620fa739cb