Webpack

npm i webpack
# 解析 CSS
npm install --save-dev css-loader
npm install --save-dev style-loader
# 產生 webpack html 控制板號套件
npm install --save-dev html-webpack-plugin
# 產生 webpack css 控制板號套件
npm install --save-dev mini-css-extract-plugin

webpack serve

{
  "scripts" : {
    "build": "NODE_ENV=production webpack",
    "dev": "NODE_ENV=production webpack serve",
  }
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
const WebpackEnv = process.env.NODE_ENV;

module.exports = {
  // 模式：development, production
  mode: 'development',  
  // mode: WebpackEnv,  
  // 打包進入點
  entry: './src/index..js',
  // 打包檔案原始碼對應（debug）
  devtool: 'source-map',
  // 輸出設定
  output: {
    // 路徑
    path: path.resolve(__dirname, 'dist'),
    // 檔名
    filename: 'main.bundle.js',
    // 檔名加入 hash
    // filename: 'main.[hash].bundle.js',
    // 清除輸出目錄舊檔案
    clean: true,
  },
  devServer: {
    port: 8888,
    // 開發預設進入目錄
    contentBase: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 遇到 CSS 檔案
        test: /\.css$/i,
        // 使用 style-loader 及 css-loader
        // use: ["style-loader", "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      // Babel Loader
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      // 圖片處理
      {
        test: /\.gif/,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    // 產生 webpack html 控制版本號套件
    new HtmlWebpackPlugin({
      // 產生的 index.html 範本
      template: './base.html'
    }),
    // 產生 webpack css 控制版本號套件
    new MiniCssExtractPlugin({
      // 產生的檔名
      filename: 'main.[hash].css'
    })
  ],
};