vue2中 webpack.config.js配置解析

// 生成HTML
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 清空文件夾
// 一般這個插件是配合 webpack -p 這條命令來使用，就是說在為生產環境編譯文件的時候，先把 build或dist (就是放生產環境用的文件) 目錄里的文件先清除干凈，再生成新的。
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// 提取css文件
// 將css單獨打包成一個文件的插件，它為每個包含css的js文件都創建一個css文件。它支持css和sourceMaps的按需加載。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 實現處理.vue文件
//vue-loader的作用是解析和轉換.vue文件，提取出其中的邏輯代碼script，樣式代碼style以及HTML模板template，再分別將它們交給對應的loader去處理。

const VueLoaderPlugin = require("vue-loader/lib/plugin");
// gzip壓縮
//打包的時候開啟gzip可以很大程度減少包的大小，非常適合於上線部署。更小的體積對於用戶體驗來說就意味着更快的加載速度以及更好的用戶體驗。

const CompressionWebpackPlugin = require("compression-webpack-plugin");

module.exports = function(env, argv) {
    // 根據不同的mode配置不同的loader
    let scssCssUse = [];
    if (argv.mode == "production") {
        scssCssUse = [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"];
    } else {
        scssCssUse = [
            "vue-style-loader",
            "style-loader",
            "css-loader",
            "sass-loader",
        ];
    }
    return {
        // 入口
        entry: {
            main: "./src/main.js",
        },
        // 出口
        output: {
            path: `${__dirname}/dist`,
            // 公用部分代碼塊文件名，公用部分的代碼會提取壓縮到這個文件中
            chunkFilename:
                argv.mode == "production"
                    ? "[name].[contenthash].js"
                    : "[name].chunk.js",
            // 模塊名+哈希字符的文件名
            filename:
                argv.mode == "production"
                    ? "[name].[contenthash].js"
                    : "[name].chunk.js",
        },
        resolve: {
            // 配置相對路徑
            alias: {
                "@": `${__dirname}/src`,
            },
            // typescript配置
            extensions: [".tsx", ".ts", ".js"],
        },
        // 插件配置
        plugins: [
            // 打包前清理dist
            new CleanWebpackPlugin(),
            // 生成HTML文件並導入js和css
            new HtmlWebpackPlugin({
                template: "public/index.html",
            }),
            new VueLoaderPlugin(),
            // 將css提取到一個單獨的文件
            new MiniCssExtractPlugin({
                filename: "[name].[contenthash].css",
            }),
            // gzip壓縮
            new CompressionWebpackPlugin({
                // asset: "[path].gz[query]",
                algorithm: "gzip",
                test: /\.(js|css|woff|ttf)$/,
                threshold: 10240,
                minRatio: 0.8,
            }),
        ],
        // 加載器：處理css,圖片，字體文件等
        module: {
            rules: [
                {
                    test: /\.(css|scss)$/,
                    use: scssCssUse,
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/,
                    use: ["file-loader", "url-loader"],
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf|wtff)$/,
                    use: ["file-loader", "url-loader"],
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"],
                        },
                    },
                },
                {
                    test: /\.vue$/,
                    loader: "vue-loader",
                },
                {
                    test: /\.ts$/,
                    loader: "ts-loader",
                    options: { appendTsSuffixTo: [/\.vue$/] },
                },
            ],
        },
        // 優化
        optimization: {
            //壓縮： production 模式下默認true
            // minimize: true,
            // 運行的公用文件，設置為single時會將所有的共享依賴合並成一個文件，當有多個入口文件時需要這樣做
            runtimeChunk: "single",
            // 動態模塊導入的共享模塊配置
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendors",
                        // 值為all時，import動態導入的模塊也會被打包的共享部分代碼文件里,值為async時只會共享異步的模塊，initial時只共享同步的模塊
                        chunks: "initial",
                    },
                },
            },
        },
        // 開發服務器
        devServer: {
            // 監聽文件的位置
            // contentBase: `${__dirname}/dist`,
            // compress: true,
            port: 9000,
            //允許通過外部訪問
            // host: "0.0.0.0",
            // 模塊熱替換，實現只更新局部
            hot: true,

　　　　　　proxy: {

     　　　　　　'/health': {

        　　　　target: 'https://www.aaa.com/',

        　　　　changeOrigin: true,

        　　　　pathRewrite: {}

      　　　　}

    　　　　}

        },
    };
};