webpack 管理资源

在 Webpack 中，管理资源是一个非常重要的部分。资源包括但不限于 JavaScript 文件、CSS 文件、图片、字体等等。Webpack 提供了丰富的功能来管理这些资源，使得我们可以更加高效地开发和打包我们的项目。

加载 JavaScript 文件

Webpack 默认支持加载 JavaScript 文件，我们只需要在入口文件中引入其他 JavaScript 文件即可。例如，我们可以在 index.js 中引入 math.js 文件：

// index.js
import { add, subtract } from './math.js';

console.log(add(1, 2)); // 输出 3
console.log(subtract(5, 3)); // 输出 2

加载 CSS 文件

除了 JavaScript 文件，Webpack 也支持加载 CSS 文件。我们可以使用 style-loader 和 css-loader 来处理 CSS 文件。首先安装这两个 loader：

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

然后在配置文件中加入对 CSS 文件的处理：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

现在我们可以在 JavaScript 文件中引入 CSS 文件：

// index.js
import './styles.css';

加载图片和字体

Webpack 也支持加载图片和字体文件。我们可以使用 file-loader 来处理这些文件。首先安装 file-loader：

npm install file-loader --save-dev

然后在配置文件中加入对图片和字体文件的处理：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
    ]
  }
};

现在我们可以在 JavaScript 文件中引入图片和字体文件：

// index.js
import icon from './icon.png';

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

这样，Webpack 就可以正确地加载和处理我们的资源文件了。

总结

资源管理是 Webpack 中一个非常重要的功能，通过合理地配置 loader 和 plugin，我们可以更加高效地处理各种类型的资源文件，提高开发效率和项目性能。