目錄檔案：

打包配置CSS資源

此時只配置了html的plugin和css的loader。

在index.css中引入圖片

webpack.config.js檔案

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  // 入口檔案
  entry: "./src/index.js",
  
 
// 出口檔案
  output: {
    // 出口檔名稱
    filename: "bluid.js",
    // 智慧合併路徑，絕對路徑
    path: resolve(__dirname,'build')
  },
  module: {
    rules: [
        {
            // 引導打包檔案和編譯的檔案為css檔案
            test: /\.css$/,
            // 內部執行哪些loader，loader的執行順序是倒敘的，後寫的先執行
            use: [
              // 識別css-laoder的js字串為樣式程式碼，新增到head標籤
 

              'style-loader',
              // css-loader是將樣式的程式碼翻譯為js的模式，內部是樣式的字串
              'css-loader'
            ]
          },      
      {
        // 識別.js結尾的檔案
        test: /\.js$/,
        // 不需要識別/翻譯node_modules資料夾內部的內容
        exclude: /node_modules/,
        // 使用的loader
        use: [
          {
            loader: 
 
'babel-loader',
            // 指導babel-loader進行翻譯的配置工具
            options: {
              presets: ['env'] // env 指的是ECMAScript New Version（ES的新版本）
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // 配置html的檔案
    new HtmlWebpackPlugin({
      // template表示是引入的模板檔案地址
      template: './src/index.html',
      // 壓縮HTML程式碼
      minify: {
        // 移除所有的空格
        collapseWhitespace: true,
        // 移除註釋
        removeComments: true
      }
    }),
    new MiniCssExtractPlugin()
  ],
  // 打包模式
  mode: 'development'
}

打包之後圖片的名稱發生了變化

開啟瀏覽器可以檢視到圖片正常載入

打包配置HTML圖片資源

HTML檔案引入的時候，我們寫的是相對路徑，此時如果進行打包後，不會識別這個路徑，找不到圖片

index.html

上面的img圖片引入的是相對路徑，經過打包後，圖片的所有地址都變換成了絕對路徑，所以瀏覽器中圖片的./找不到了

需要引入html-loader進行圖片的處理

安裝依賴

npm install html-loader -D

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  // 入口檔案
  entry: "./src/index.js",
  // 出口檔案
  output: {
    // 出口檔名稱
    filename: "bluid.js",
    // 智慧合併路徑，絕對路徑
    path: resolve(__dirname,'build')
  },
  module: {
    rules: [
        {
            // 引導打包檔案和編譯的檔案為css檔案
            test: /\.css$/,
            // 內部執行哪些loader，loader的執行順序是倒敘的，後寫的先執行
            use: [
              // 識別css-laoder的js字串為樣式程式碼，新增到head標籤
              'style-loader',
              // css-loader是將樣式的程式碼翻譯為js的模式，內部是樣式的字串
              'css-loader'
            ]
          },      
      {
        // 識別.js結尾的檔案
        test: /\.js$/,
        // 不需要識別/翻譯node_modules資料夾內部的內容
        exclude: /node_modules/,
        // 使用的loader
        use: [
          {
            loader: 'babel-loader',
            // 指導babel-loader進行翻譯的配置工具
            options: {
              presets: ['env'] // env 指的是ECMAScript New Version（ES的新版本）
            }
          }
        ]
      },
      {
        // 配置編譯img標籤引入的圖片
        loader: 'html-loader',
        test: /\.html$/
      }
    ]
  },
  plugins: [
    // 配置html的檔案
    new HtmlWebpackPlugin({
      // template表示是引入的模板檔案地址
      template: './src/index.html',
      // 壓縮HTML程式碼
      minify: {
        // 移除所有的空格
        collapseWhitespace: true,
        // 移除註釋
        removeComments: true
      }
    }),
    new MiniCssExtractPlugin()
  ],
  // 打包模式
  mode: 'development'
}

此時我們進行打包後，html檔案的img地址也會變成打包之後的圖片名