webpack5配置，webpack.config.js

// 用來拼接絕對路徑
const {resolve} = require('path');

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

module.exports = {
  // 五個核心
  // 1. 入口文件
  entry: './src/main.js',

  // 2. 出口
  output: {
    filename: 'static/js/main.js', // 出口文件名，這樣可以讓js在js文件夾下
    // filename: 'main.js', // 出口文件名
    path: resolve(__dirname, 'dist'), // 出口路徑
    clean: true // 自動清空上次打包的內容
  },

  // 3. loader的配置
  module: {
    rules: [
      // 詳細的loader配置
      {
        test: /\.css$/, // 正則，匹配以.css結尾的文件
        use: [
          // loader執行順序從下往上
          'style-loader', // 創建style標籤，將js中的樣式資源插入進去，添加到head中生效
          'css-loader' // 將css文件變成commonjs模塊加載到js中，裏邊內容是樣式字符串
        ]
      },
      {
        test: /\.(jpg|png)$/,
        type: 'asset',
        // 這樣可以讓圖片在images文件夾下
        generator: {
          filename: 'static/images/[hash:10][ext][query]'
        }
      },
      {
        test: /\.(ttf|woff|woff2)$/,
        type: 'asset/resource',
        // 這樣可以讓字體圖標在fonts文件夾下
        generator: {
          filename: 'static/fonts/[hash:10][ext][query]'
        }
      }
    ]
  },

  // 4. plugins的配置
  plugins: [
    // 打包後創建一個空的html文件（以./src/index.html爲模板），會引入打包後的css,js等
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  // 5. 模式
  mode: 'development'
}