webpack.config.js

/*
                webpack.config.js  webpack的配置檔案
                作用: 指示 webpack 幹哪些活（當你執行 webpack 指令時，會載入裡面的配置）

                所有構建工具都是基於nodejs平臺執行的~模組化預設採用commonjs。
                */

// resolve用來拼接絕對路徑的方法
const {
    resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin 
 
= require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

process.env.NODE_ENV = 'production';

module.exports = {
    // webpack配置
    // 入口起點
    entry: {
        index: './src/js/index.js',
        home: 
 
'./src/js/home.js'
    },
    // 輸出
    output: {
        // 輸出檔名
        filename: './js/[name].js',
        // 輸出路徑
        // __dirname nodejs的變數，代表當前檔案的目錄絕對路徑
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 詳細loader配置
            // 不同檔案必須配置不同loader處理
 

            //js程式碼檢查eslint
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     // 優先執行
            //     enforce: 'pre',
            //     loader: 'eslint-loader',
            //     options: {
            //         // 自動修復eslint的錯誤
            //         fix: true
            //     }
            // },

            //相容性處理
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    // 預設：指示babel做怎麼樣的相容性處理
                    presets: [
                        [
                            //第一種方式 基本js語法處理
                            '@babel/preset-env',
                            // 第三種家在方式  --- core-js
                            {
                                // 按需載入
                                useBuiltIns: 'usage',
                                // 指定core-js版本
                                corejs: {
                                    version: 3
                                },
                                // 指定相容性做到哪個版本瀏覽器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },

            //處理css資源
            {
                // 匹配哪些檔案
                test: /\.css$/,
                // 使用哪些loader進行處理
                use: [
                    // use陣列中loader執行順序：從右到左，從下到上 依次執行
                    // 建立style標籤，將js中的樣式資源插入進行，新增到head中生效
                    // 'style-loader',
                    //*** 這個loader取代style-loader。作用：提取js中的css成單獨檔案
                    MiniCssExtractPlugin.loader,
                    // 將css檔案變成commonjs模組載入js中，裡面內容是樣式字串
                    'css-loader',
                    //設定css相容性
                    // 使用loader的預設配置
                    // 'postcss-loader',
                    // 修改loader的配置
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env"
                                    ],
                                ],

                                // parser: "postcss-js",
                            },
                            // execute: true,
                        },
                    }
                ]
            },

            {
                //處理less檔案
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    //*** 這個loader取代style-loader。作用：提取js中的css成單獨檔案
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    //設定css相容性
                    // 使用loader的預設配置
                    // 'postcss-loader',
                    // 修改loader的配置
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env"
                                    ],
                                ],

                                // parser: "postcss-js",
                            },
                            // execute: true,
                        },
                    },
                    // 將less檔案編譯成css檔案
                    // 需要下載 less-loader和less
                    'less-loader'
                ]
            },

            // 處理外部(css)圖片資源
            {
                // 問題：預設處理不了html中img圖片
                // 處理圖片資源
                test: /\.(jpg|png|gif)$/,
                // 需要一個type 否則會出現問題
                type: 'javascript/auto',
                // 使用一個loader
                // 下載 url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 圖片大小小於8kb，就會被base64處理
                    // 優點: 減少請求數量（減輕伺服器壓力）
                    // 缺點：圖片體積會更大（檔案請求速度更慢）
                    limit: 8 * 1024,
                    outputPath: 'imgs',
                    // 問題：因為url-loader預設使用es6模組化解析，而html-loader引入圖片是commonjs
                    // 解析時會出問題：[object Module]
                    // 解決：關閉url-loader的es6模組化，使用commonjs解析
                    esModule: false,
                    // 給圖片進行重新命名
                    // [hash:10]取圖片的hash的前10位
                    // [ext]取檔案原來副檔名
                    name: '[hash:10].[ext]',

                }
            },

            // 處理html檔案的img圖片
            {
                test: /\.html$/,
                // 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
                loader: 'html-loader',
            },

            // 打包其他資源(除了html/js/css資源以外的資源)
            {
                // 排除css/js/html資源
                exclude: /\.(css|js|html|less|jpg|png)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            },

        ]
    },

    optimization: {
        //預設是在生產環境才會壓縮程式碼,設定為true則開發環境開啟壓縮程式碼
        minimize: true,
        //設定壓縮css外掛
        minimizer: [new TerserPlugin({
            test: /\.js(\?.*)?$/i, //匹配參與壓縮的檔案
            parallel: true, //使用多程序併發執行
            terserOptions: { //Terser 壓縮配置
                output: {
                    comments: false
                }
            },
            extractComments: true, //將註釋剝離到單獨的檔案中
        })],
    },

    // plugins的配置
    plugins: [
        // 詳細plugins的配置
        // html-webpack-plugin
        // 功能：預設會建立一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML檔案
        new HtmlWebpackPlugin({
            // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html',
            chunks: ['index'],
            filename: "index.html",
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除註釋
                removeComments: true
            }
        }),
        new HtmlWebpackPlugin({
            // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS）
            filename: './src/Page/Home.html',
            template: './src/Page/Home.html',
            chunks: ['home'],
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除註釋
                removeComments: true
            }
        }),
        new HtmlWebpackPlugin({
            // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS）
            filename: './src/Page/AdvancedSearch.html',
            template: './src/Page/AdvancedSearch.html',
            chunks: ['advancedsearch'],
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除註釋
                removeComments: true
            }
        }),
        new HtmlWebpackPlugin({
            // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS）
            filename: './src/Page/DataStatistics.html',
            template: './src/Page/DataStatistics.html',
            chunks: ['datastatistics'],
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除註釋
                removeComments: true
            }
        }),
        new HtmlWebpackPlugin({
            // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS）
            filename: './src/Page/keyWordList.html',
            template: './src/Page/keyWordList.html',
            chunks: ['keywordlist'],
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除註釋
                removeComments: true
            }
        }),
        new HtmlWebpackPlugin({
            // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS）
            filename: './src/Page/SpatialQuery.html',
            template: './src/Page/SpatialQuery.html',
            chunks: ['spatialquery'],
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除註釋
                removeComments: true
            }
        }),
        new HtmlWebpackPlugin({
            // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS）
            filename: './src/Page/Login.html',
            template: './src/Page/Login.html',
            chunks: ['login'],
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除註釋
                removeComments: true
            }
        }),

        //從js提取css外掛
        new MiniCssExtractPlugin({
            // 設定輸出的檔案目錄和重設檔名
            filename: 'css/[name].css'
        })
    ],
    // 模式
    mode: 'development'
}

 package.json檔案

{
  "name": "jquerymap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --port 3000",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "babel-loader": "^8.2.3",
    "core-js": "^3.18.3",
    "css-loader": "^6.4.0",
    "css-minimizer-webpack-plugin": "^3.1.1",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.25.2",
    "file-loader": "^6.2.0",
    "html-loader": "^3.0.0",
    "html-webpack-plugin": "^5.4.0",
    "jquery": "^3.6.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "mini-css-extract-plugin": "^2.4.3",
    "postcss": "^8.3.10",
    "postcss-loader": "^6.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {},
  "dependencies": {
    "axios": "^0.26.1",
    "eslint-plugin-html": "^6.2.0",
    "nanoid": "^3.3.2",
    "nprogress": "^0.2.0",
    "terser-webpack-plugin": "^5.3.1",
    "webpack-dev-server": "^4.8.1"
  }
}

檔案目錄截圖