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'
    })
  ],
};