Webpack 5（八）加载资源

2023-10-19 本文已影响0人 _于曼丽_

资源的存放路径与访问路径

资源文件

打包之前，一个文件就是一个模块。模块可以是任何类型的文件（js 模块，css 文件，图像文件），模块之间存在依赖关系。这些文件作为源代码，一般存放在项目目录下的 src 目录中。

打包之后，一个文件就是一个资源。通过 webpack 生成 chunk 文件 (js 文件)，通过 HtmlWebpackPlugin 生成 html 文件，通过 MiniCssExtractPlugin 生成 css 文件，通过 asset/resource 生成图像文件。这些文件统称为资源文件，存放在 output.path 定义的目录下。

资源文件的存放路径与访问路径

通过 output.path 定义资源文件的存放路径：

js 文件：output.path + output.filename
css 文件：output.path + MiniCssExtractPlugin 插件的 options.filename
图像文件：output.path + {图片资源 rule}.generator.filename

通过 output.publicPath 定义资源文件的访问路径：

js 文件：output.publicPath + output.filename
css 文件：output.publicPath + MiniCssExtractPlugin 插件的 options.filename
图像文件：output.publicPath + {图片资源 rule}.generator.filename

访问资源

在浏览器地址栏：

输入资源文件的访问路径，可以访问资源

在 html 文件里：

通过 <script src="js 文件访问路径"> 访问 js 资源
通过 <link href="css 文件访问路径"> 访问 css 资源
通过 <img src="图像文件访问路径"> 访问图像资源

在 css 文件里：

通过 url(图像文件访问路径) 访问图像资源

通过 HtmlWebpackPlugin 生成的 html 文件，通过 MiniCssExtractPlugin 生成的 css 文件，会按照 output.publicPath 自动添加资源访问路径。具体能不能根据资源路径访问到相应的资源，还得正确的部署 output.path 目录到服务器。

加载 CSS

css-loader
style-loader
MiniCssExtractPlugin
CssMinimizerWebpackPlugin

开发模式下，通过 css-loader 将 css 模块转为 javascript 模块，通过 style-loader 用内嵌的 <style></style> 标签在 html 文档中动态插入 css 代码。

/* webpack.config.js */

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

module.exports = {
  ...
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin()
  ],
  ...
}

/* index.js */

// 会动态生成两个 <style></style> 标签
import './base.css';
import './style.css';

console.log('Hello world'!);

生产模式下，通过 css-loader 将 css 模块转为 javascript 模块，通过 MiniCssExtractPlugin 将 css 代码分离出来，通过 CssMinimizerPlugin 来压缩 css 代码，通过 HtmlWebpackPlugin 生成的 html 文档会使用 <link> 标签自动引入分离出的 css 文件。

/* webpack.config.js */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  ...
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin()
  ],
  optimization: {
    minimizer: [
      '...',
      new CssMinimizerPlugin()
    ],
  }
  ...
}

/* index.js */

// 将依赖的所有 css 模块都打包到一个 js 文件分离出去，通过一个 <link> 标签引入到 html 文档中
import './base.css';
import './style.css';

console.log('Hello world'!);

默认情况下：

css 文件的存放路径为：output.path/[name].css
css 文件的访问路径为：output.publicPath/[name].css

可以通过 MiniCssExtractPlugin 插件的 options.filename 自定义 css 文件路径。

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
}

通过以上配置：

css 文件的存放路径为：output.path/css/[name].css
css 文件的访问路径为：output.publicPath/css/[name].css

加载图像

通过以下三种方式都可以表明模块对图像模块的依赖关系：

在 js 模块中 import MyImage from './my-image.png'
在 css 模块中 url('./my-image.png')
在 html 模块中 <img src="./my-image.png" />

在 webpack 5 中通过 asset module 来处理图像等资源模块

/* webpack.config.js */

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpg|jpeg|png|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
}

type: 'asset/resource'：会将依赖的图像以 [hash][ext][query] 文件名导出到 output.path 指定的输出目录。

默认情况下：

导出的图像文件的存放路径为：output.path/[hash][ext][query]
导出的图像文件的访问路径为：output.publicPath/[hash][ext][query]

通过 Rule.generator.filename 可以自定义导出的图像路径。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpg|jpeg|png|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]',
        },
      }
    ]
  },
}