webpack之管理资源

最新推荐文章于 2025-08-13 08:56:05 发布

原创最新推荐文章于 2025-08-13 08:56:05 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack学习专栏收录该内容

1 篇文章

订阅专栏

本文基于之前的webpack小项目，介绍如何使用webpack整合CSS、图片等资源。详细说明了加载CSS时需安装相关loader并在配置中添加，以及加载图片时要安装file - loader，最后通过构建项目在浏览器中验证效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在上一篇webpack概念引入以及入门案例中有了一个小项目，显示了"Hello webpack"。现在，我们尝试去整合其它资源，比如css、图片、字体，看看webpack如何处理。

webpack最酷的一个功能就是除了JavaScript，可以使用loader引入其它任何类型文件。

加载CSS

开始之前对原有的项目也就是上一篇中的小项目的目录结构改变一下。
（说明：本文贴出的代码，若行首有"+“表示改行代码是新增的，”-"表示删除的。）
dist/index.html

  <!doctype html>
  <html>
    <head>
-    <title>Getting Started</title>
+    <title>Asset Management</title>
    </head>
    <body>
-     <script src="main.js"></script>
+     <script src="bundle.js"></script>
    </body>
  </html>

webpack.config.js

 const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
-     filename: 'main.js',
+     filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

首先需要安装加载css的有关loader（style-loader 和 css-loader），接着在 module 配置中添加 style-loader 和 css-loader：

npm install --save-dev style-loader css-loader

webpack.config.js

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

现在可以在项目中添加一个新的 style.css 文件，并将其导入到我们的 index.js 中：
project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- style.css
    |- index.js
  |- /node_modules

style.css

.hello {
  color: red;
}

src/index.js

 import _ from 'lodash';
+ import './style.css';

  function component() {
    const element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());

运行构建命令

npm run build

在浏览器中打开 index.html，你应该看到 Hello webpack 现在的样式是红色。查看网页源代码的head标签可以看到引入了style.css样式。
在这里插入图片描述

加载图片

首先，安装file-loader

npm install --save-dev file-loader

webpack.config.js

const path = require('path');

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

添加图片
project

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

src/index.js

import _ from 'lodash';
import './style.css';
+ import Icon from './icon.png';

  function component() {
    const element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

+   // Add the image to our existing div.
+   const myIcon = new Image();
+   myIcon.src = Icon;
+
+   element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

重新构建，并在浏览器中打开 index.html 文件

npm run build

...
                               Asset      Size  Chunks                    Chunk Names
da4574bb234ddc4bb47cbe1ca4b20303.png  3.01 MiB          [emitted]  [big]
                           bundle.js  76.7 KiB       0  [emitted]         main
Entrypoint main = bundle.js
...

在这里插入图片描述