返回

Webpack功能宝典：巧妙引入外部资源文件

前端

在Webpack中，我们需要引入各种外部资源文件，如样式表、脚本文件等。Webpack提供了多种方式来实现这一目的，其中一种是使用public文件夹和html-webpack-plugin。

public文件夹

public文件夹是Webpack中一个特殊的文件夹，用于存放所有静态资源文件，如样式表、脚本文件、图像文件等。Webpack在构建项目时，会自动将public文件夹中的所有文件复制到输出目录中。

html-webpack-plugin

html-webpack-plugin是一个Webpack插件，可以帮助我们自动将构建后的资源文件注入到HTML文件中。

具体操作步骤

  1. 在Webpack配置文件中，添加html-webpack-plugin插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
};

  1. 在public文件夹中，创建所需的静态资源文件，如样式表、脚本文件等。

  2. 在HTML文件中，使用link和script标签引入这些静态资源文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>
  1. 运行Webpack命令，构建项目：
webpack
  1. 构建完成后，输出目录中将生成index.html文件，其中已经自动注入了构建后的资源文件。

示例代码

以下是一个完整的示例代码，演示了如何在Webpack中引入外部资源文件：

// Webpack配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
};

// public文件夹中的style.css文件
body {
  background-color: #f0f0f0;
  font-family: sans-serif;
}

// public文件夹中的main.js文件
console.log('Hello, Webpack!');

// index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>

运行Webpack命令后，输出目录中将生成index.html文件，其中已经自动注入了构建后的style.css和main.js文件。