Webpack 入门教程：打包 img 静态资源

Webpack 是一个现代化的前端打包工具，它可以将多个 JavaScript 文件和其他静态资源打包成一个或多个文件，从而提高网站的加载速度和性能。在本文中，我们将学习如何使用 Webpack 打包图片静态资源，以及如何在前端项目中引用这些图片。

安装和配置 Webpack

首先，我们需要安装 Webpack。使用 npm 安装 Webpack 命令如下：

npm install webpack webpack-cli --save-dev

接下来，我们需要在项目根目录下创建一个 webpack.config.js 文件，用于配置 Webpack。在该文件中，我们需要指定入口文件、输出文件以及需要使用的 loader。

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

在上面的配置中，我们指定了入口文件为 ./src/index.js，输出文件为 dist/bundle.js。同时，我们还使用了 file-loader 来处理图片文件。

打包图片静态资源

接下来，我们需要在项目中添加一些图片资源，并使用 Webpack 打包这些图片静态资源。我们可以在 ./src 目录下创建一个 images 目录，并在其中添加一些图片文件。

在 JavaScript 文件中引用这些图片，可以使用 import 或 require 语句。例如，在 ./src/index.js 中引用图片文件如下：

import logo from './images/logo.png';

const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);

在上面的代码中，我们使用 import 语句引入了 logo.png 图片文件，并将其添加到页面中。

接下来，我们可以使用 npm run build 命令来打包我们的项目。在打包完成后，我们可以在 ./dist 目录下找到打包后的文件，并查看其中是否包含了我们的图片文件。

总结

在本文中，我们学习了如何使用 Webpack 打包图片静态资源，并在前端项目中引用这些图片。通过学习本文，你可以了解到如何使用 Webpack 来打包不同类型的静态资源，并在前端项目中使用这些资源。希望本文能够对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65840606d2f5e1655decf4b7