資源的存放路徑與訪問路徑

資源文件

打包之前，一個文件就是一個模塊。模塊可以是任何類型的文件（js 模塊，css 文件，圖像文件），模塊之間存在依賴關(guān)系。這些文件作為源代碼，一般存放在項目目錄下的 src 目錄中。

打包之后，一個文件就是一個資源。通過 webpack 生成 chunk 文件 (js 文件)，通過 HtmlWebpackPlugin 生成 html 文件，通過 MiniCssExtractPlugin 生成 css 文件，通過 asset/resource 生成圖像文件。這些文件統(tǒng)稱為資源文件，存放在 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 自動添加資源訪問路徑。具體能不能根據(jù)資源路徑訪問到相應(yīng)的資源，還得正確的部署 output.path 目錄到服務(wù)器。

加載 CSS

css-loader
style-loader
MiniCssExtractPlugin
CssMinimizerWebpackPlugin

開發(fā)模式下，通過 css-loader 將 css 模塊轉(zhuǎn)為 javascript 模塊，通過 style-loader 用內(nèi)嵌的 <style></style> 標(biāo)簽在 html 文檔中動態(tài)插入 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 */

// 會動態(tài)生成兩個 <style></style> 標(biāo)簽
import './base.css';
import './style.css';

console.log('Hello world'!);

生產(chǎn)模式下，通過 css-loader 將 css 模塊轉(zhuǎn)為 javascript 模塊，通過 MiniCssExtractPlugin 將 css 代碼分離出來，通過 CssMinimizerPlugin 來壓縮 css 代碼，通過 HtmlWebpackPlugin 生成的 html 文檔會使用 <link> 標(biāo)簽自動引入分離出的 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> 標(biāo)簽引入到 html 文檔中
import './base.css';
import './style.css';

console.log('Hello world'!);

默認(rèn)情況下：

• 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

加載圖像

通過以下三種方式都可以表明模塊對圖像模塊的依賴關(guān)系：

• 在 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] 文件名導(dǎo)出到 output.path 指定的輸出目錄。

默認(rèn)情況下：

• 導(dǎo)出的圖像文件的存放路徑為：output.path/[hash][ext][query]
• 導(dǎo)出的圖像文件的訪問路徑為：output.publicPath/[hash][ext][query]

通過 Rule.generator.filename 可以自定義導(dǎo)出的圖像路徑。

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

通過以上配置：

• 導(dǎo)出的圖像文件的存放路徑為：output.path/images/[hash][ext][query]
• 導(dǎo)出的圖像文件的訪問路徑為：output.publicPath/images/[hash][ext][query]

type 可以取以下四種值：

• asset/resource 發(fā)送一個單獨的文件并導(dǎo)出 URL。之前通過使用 file-loader 實現(xiàn)。
• asset/inline 導(dǎo)出一個資源的 data URI。之前通過使用 url-loader 實現(xiàn)。
• asset/source 導(dǎo)出資源的源代碼。之前通過使用 raw-loader 實現(xiàn)。
• asset 在導(dǎo)出一個 data URI 和發(fā)送一個單獨的文件之間自動選擇。之前通過使用 url-loader，并且配置資源體積限制實現(xiàn)。