Webpack：自动引入资源，轻松管理应用程序资源

2024-02-17 07:30:55

Webpack 基础应用 - [5] 自动引入资源

我们一直都在 index.html 文件中手动引入所有资源。然而，随着应用程序的不断增长，如果继续手动管理 index.html 文件，将会变得越来越困难。幸运的是，有一些插件可以使这个过程变得更容易控制。

自动引入脚本

最常用的插件之一是 html-webpack-plugin。它允许你定义一个模板文件，webpack 将在此基础上生成最终的 index.html 文件。

要使用此插件，请安装它：

npm install --save-dev html-webpack-plugin

然后在你的 webpack 配置文件中使用它：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' // 指定模板文件
    })
  ]
};

现在，webpack 将根据你指定的模板文件自动生成 index.html 文件。你可以使用诸如 <script src="./main.js"></script> 之类的标签在模板文件中引用你的脚本。webpack 将自动将这些引用注入到生成的 index.html 文件中。

自动引入样式

你还可以使用类似的方式自动引入样式表。要做到这一点，可以使用 mini-css-extract-plugin 插件。

要使用此插件，请安装它：

npm install --save-dev mini-css-extract-plugin

然后在你的 webpack 配置文件中使用它：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css' // 指定输出样式文件名
    })
  ]
};