Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化

這篇具有很好參考價(jià)值的文章主要介紹了Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

安裝

npm i element-plus

全部引入，在入口文件main.js

Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化,Webpack,webpack

?啟動(dòng)：npm start
Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化,Webpack,webpack

?按需引入

需要插件快速開始 | Element Plus (gitee.io)

npm install -D unplugin-vue-components unplugin-auto-import

Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化,Webpack,webpack

? Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化,Webpack,webpack


//ESLint先引入
const ESLintPlugin = require('eslint-webpack-plugin');
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
//處理html
const HtmlWebpackPlugin = require("html-webpack-plugin");

//提取樣式成為單獨(dú)文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//對(duì)樣式壓縮
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//對(duì)js壓縮
const TerserPlugin = require("terser-webpack-plugin");
//復(fù)制靜態(tài)資源文件到index目錄下面
const CopyPlugin = require("copy-webpack-plugin");
//解決vue警告  
const { DefinePlugin } = require("webpack");
//處理單文件組件
const { VueLoaderPlugin } = require("vue-loader");

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

// 需要通過 cross-env 定義環(huán)境變量
const isProduction = process.env.NODE_ENV === "production";

const getStyleLoaders = (preProcessor) => {
    return [
        isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader",//提取成單獨(dú)文件
        "css-loader",// //該模塊將css資源編譯成commonjs的模塊到j(luò)s中
        {//考慮兼容性問題-配合packafe.json中的browserslist來指定兼容性
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
                    ],
                },
            },
        },
        preProcessor,
    ].filter(Boolean);
}
module.exports = {
    // 入口
    entry: "./src/main.js",// 相對(duì)路徑和絕對(duì)路徑都行 由于運(yùn)行是在外面運(yùn)行的所以不需要改變
    // 輸出
    output: {// 必須絕對(duì)路徑
        //生產(chǎn)模式有輸出
        path: isProduction ? path.resolve(__dirname, "../dist") : undefined,//絕對(duì)路徑需要更改
        // filename: 輸出文件名-contenthash更好的做緩存
        filename: isProduction
      ? "static/js/[name].[contenthash:10].js"
      : "static/js/[name].js",
        //給打包輸出的文件命名-動(dòng)態(tài)導(dǎo)入
        chunkFilename: isProduction
        ? "static/js/[name].[contenthash:10].chunk.js"
        : "static/js/[name].chunk.js",
        // 圖片、字體等資源命名方式（注意用hash）
        assetModuleFilename: "static/js/[hash:10][ext][query]",
        clean: true,//自動(dòng)將上次打包目錄資源清空
    },
    // 加載器-幫助識(shí)別不能識(shí)別的內(nèi)容
    module: {//loader規(guī)則
        rules: [
            {
                //每個(gè)文件只能被其中一個(gè)loader配置處理
                oneOf: [
                    {
                        //css處理
                        test: /\.css$/i, // 用來匹配 .css 結(jié)尾的文件
                        use: getStyleLoaders(),
                    },
                    {
                        test: /\.less$/i, // 用來匹配 .less 結(jié)尾的文件
                        //loader:"xxx"只能使用1個(gè)loader
                        use: getStyleLoaders("less-loader"),
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: getStyleLoaders("sass-loader"),
                    },
                    {
                        test: /\.styl$/,
                        use: getStyleLoaders("stylus-loader"),
                    },
                    //處理圖片
                    {
                        test: /\.(png|jpe?g|gif|webp|svg)/,
                        type: 'asset',//asset會(huì)轉(zhuǎn)base64
                        parser: {//圖片優(yōu)化
                            dataUrlCondition: {
                                //小于10ke圖片轉(zhuǎn)base64
                                //優(yōu)點(diǎn)：減少請(qǐng)求數(shù)量 缺點(diǎn)：體積會(huì)更大
                                maxSize: 10 * 1024 // 10kb
                            }
                        },
                    },
                    {//處理其他資源
                        test: /\.(ttf|woff2|map4|map3|avi?)$/,//針對(duì)文件類型，正則
                        type: "asset/resource",//不會(huì)轉(zhuǎn)，原封不動(dòng)輸出
                    },
                    {
                        test: /\.jsx?$/,//處理的文件js+jsx
                        include: path.resolve(__dirname, "../src"), //只處理src文件
                        use: [
                            {
                                loader: "babel-loader",//只用一個(gè)
                                //提升性能
                                options: {
                                    cacheDirectory: true, // 開啟babel編譯緩存
                                    cacheCompression: false, // 緩存文件不要壓縮，壓縮需要時(shí)間 
                                },
                            },//這里不考慮多線程
                        ]
                    },
                ],
            },
            // vue-loader不支持oneOf
            {//處理vue資源
                test: /\.vue$/,
                loader: "vue-loader", // 內(nèi)部會(huì)給vue文件注入HMR功能代碼
                options: {
                    // 開啟緩存
                    cacheDirectory: path.resolve(
                        __dirname,
                        "node_modules/.cache/vue-loader"
                    ),
                },
            },]
    },
    // 插件-擴(kuò)展功能
    plugins: [
        //檢查eslint
        new ESLintPlugin({
            // 指定檢查文件的根目錄
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 默認(rèn)值-排除不處理
            cache: true, // 開啟緩存
            // 緩存目錄
            cacheLocation: path.resolve(
                __dirname,
                "../node_modules/.cache/.eslintcache"
            ),
        }),
        //處理html資源 自動(dòng)引入
        new HtmlWebpackPlugin({
            // 以 public/index.html 為模板創(chuàng)建新的html文件
            // 新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 DOM結(jié)構(gòu) 2. 自動(dòng)引入打包生成的js等資源
            template: path.resolve(__dirname, "../public/index.html"),
        }),

        // 提取css成單獨(dú)文件
        isProduction && new MiniCssExtractPlugin( // 定義輸出文件名和目錄
            {
                // 定義輸出文件名和目錄
                filename: "static/css/[name].[contenthash:10].css",
                //動(dòng)態(tài)導(dǎo)入也有css
                chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
            }),
        //復(fù)制public資源到index里面
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "../public"),//將public包含index文件
                    to: path.resolve(__dirname, "../dist"),//復(fù)制到dist目錄下 
                    globOptions: {
                        // 忽略index.html文件
                        ignore: ["**/index.html"],
                    },
                },
            ],
        }),
        new VueLoaderPlugin(),
        //定義cross_env定義環(huán)境變量給打包工具屬于
        //DefinePlugin定義環(huán)境變量給源代碼使用 從而解決vue3警告問題
        new DefinePlugin({
            __VUE_OPTIONS_API__: "true",
            __VUE_PROD_DEVTOOLS__: "false",
          }),
          AutoImport({
            resolvers: [ElementPlusResolver()],
          }),
          Components({
            resolvers: [ElementPlusResolver()],
          }),
    ].filter(Boolean),

    // 模式
    mode: isProduction ? "production" : "development",
    devtool: isProduction ? "source-map" : "cheap-module-source-map",
    //代碼分割
    optimization: {
        splitChunks: {
            chunks: "all",
        },
        // 提取runtime文件
        runtimeChunk: {//會(huì)導(dǎo)致緩存失效-處理
            name: (entrypoint) => `runtime~${entrypoint.name}`,
        },
        minimize: isProduction,
        //壓縮css
        minimizer: [
            // css壓縮也可以寫到optimization.minimizer里面，效果一樣的
            //壓縮css
            new CssMinimizerPlugin(),
            // 當(dāng)生產(chǎn)模式會(huì)默認(rèn)開啟TerserPlugin，但是我們需要進(jìn)行其他配置，就要重新寫了
            //壓縮js
            new TerserPlugin(),
        ],
    },

    //webpack解析模塊加載選項(xiàng)
    resolve: {
        //自動(dòng)補(bǔ)全文件擴(kuò)展名
        extensions: ['.vue', '.js', '.json']
    }
};

更改默認(rèn)配置

主題 | Element Plus (gitee.io)

Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化,Webpack,webpack

        preProcessor && {
            loader: preProcessor,
            options:
                preProcessor === "sass-loader"
                    ? {
                        // 自定義主題：自動(dòng)引入我們定義的scss文件 --@是路徑別名需要配置
                        additionalData: `@use "@/styles/element/index.scss" as *;`,
                    }
                    : {},
        },

    //webpack解析模塊加載選項(xiàng)
    resolve: {
        //自動(dòng)補(bǔ)全文件擴(kuò)展名
        extensions: ['.vue', '.js', '.json'],
        alias: {
            // 路徑別名
            "@": path.resolve(__dirname, "../src"),
          },
    }

      //按需加載
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver({
                importStyle: "sass",//自定義主題 引入sass
            })],
        }),

Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化,Webpack,webpack

?如果有模塊沒有安裝，安裝一下即可

優(yōu)化

關(guān)閉性能分析

    performance: false,//關(guān)閉性能分析提升打包速度

文件單獨(dú)打包

cacheGroups: {
            // layouts通常是admin項(xiàng)目的主體布局組件，所有路由組件都要使用的
            // 可以單獨(dú)打包，從而復(fù)用
            // 如果項(xiàng)目中沒有，請(qǐng)刪除
            layouts: {
              name: "layouts",
              test: path.resolve(__dirname, "../src/layouts"),
              priority: 40,
            },
            // 如果項(xiàng)目中使用element-plus，此時(shí)將所有node_modules打包在一起，那么打包輸出文件會(huì)比較大。
            // 所以我們將node_modules中比較大的模塊單獨(dú)打包，從而并行加載速度更好
            // 如果項(xiàng)目中沒有，請(qǐng)刪除
            elementUI: {
              name: "chunk-elementPlus",
              test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
              priority: 30,
            },
            // 將vue相關(guān)的庫(kù)單獨(dú)打包，減少node_modules的chunk體積。
            vue: {
              name: "vue",
              test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,
              chunks: "initial",
              priority: 20,
            },
            libs: {
              name: "chunk-libs",
              test: /[\\/]node_modules[\\/]/,
              priority: 10, // 權(quán)重最低，優(yōu)先考慮前面內(nèi)容
              chunks: "initial",
            },
          },

做緩存-文章來源地址http://www.zghlxwxcb.cn/news/detail-720394.html

 {//處理vue資源
                test: /\.vue$/,
                loader: "vue-loader", // 內(nèi)部會(huì)給vue文件注入HMR功能代碼
                options: {
                    // 開啟緩存
                    cacheDirectory: path.resolve(
                        __dirname,
                        "node_modules/.cache/vue-loader"
                    ),
                },
            },]


//ESLint先引入
const ESLintPlugin = require('eslint-webpack-plugin');
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
//處理html
const HtmlWebpackPlugin = require("html-webpack-plugin");

//提取樣式成為單獨(dú)文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//對(duì)樣式壓縮
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//對(duì)js壓縮
const TerserPlugin = require("terser-webpack-plugin");
//復(fù)制靜態(tài)資源文件到index目錄下面
const CopyPlugin = require("copy-webpack-plugin");
//解決vue警告  
const { DefinePlugin } = require("webpack");
//處理單文件組件
const { VueLoaderPlugin } = require("vue-loader");

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

// 需要通過 cross-env 定義環(huán)境變量
const isProduction = process.env.NODE_ENV === "production";

const getStyleLoaders = (preProcessor) => {
    return [
        isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader",//提取成單獨(dú)文件
        "css-loader",// //該模塊將css資源編譯成commonjs的模塊到j(luò)s中
        {//考慮兼容性問題-配合packafe.json中的browserslist來指定兼容性
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
                    ],
                },
            },
        },
        preProcessor && {
            loader: preProcessor,
            options:
                preProcessor === "sass-loader"
                    ? {
                        // 自定義主題：自動(dòng)引入我們定義的scss文件 --@是路徑別名需要配置
                        additionalData: `@use "@/styles/element/index.scss" as *;`,
                    }
                    : {},
        },
    ].filter(Boolean);
}
module.exports = {
    // 入口
    entry: "./src/main.js",// 相對(duì)路徑和絕對(duì)路徑都行 由于運(yùn)行是在外面運(yùn)行的所以不需要改變
    // 輸出
    output: {// 必須絕對(duì)路徑
        //生產(chǎn)模式有輸出
        path: isProduction ? path.resolve(__dirname, "../dist") : undefined,//絕對(duì)路徑需要更改
        // filename: 輸出文件名-contenthash更好的做緩存
        filename: isProduction
            ? "static/js/[name].[contenthash:10].js"
            : "static/js/[name].js",
        //給打包輸出的文件命名-動(dòng)態(tài)導(dǎo)入
        chunkFilename: isProduction
            ? "static/js/[name].[contenthash:10].chunk.js"
            : "static/js/[name].chunk.js",
        // 圖片、字體等資源命名方式（注意用hash）
        assetModuleFilename: "static/js/[hash:10][ext][query]",
        clean: true,//自動(dòng)將上次打包目錄資源清空
    },
    // 加載器-幫助識(shí)別不能識(shí)別的內(nèi)容
    module: {//loader規(guī)則
        rules: [
            {
                //每個(gè)文件只能被其中一個(gè)loader配置處理
                oneOf: [
                    {
                        //css處理
                        test: /\.css$/i, // 用來匹配 .css 結(jié)尾的文件
                        use: getStyleLoaders(),
                    },
                    {
                        test: /\.less$/i, // 用來匹配 .less 結(jié)尾的文件
                        //loader:"xxx"只能使用1個(gè)loader
                        use: getStyleLoaders("less-loader"),
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: getStyleLoaders("sass-loader"),
                    },
                    {
                        test: /\.styl$/,
                        use: getStyleLoaders("stylus-loader"),
                    },
                    //處理圖片
                    {
                        test: /\.(png|jpe?g|gif|webp|svg)/,
                        type: 'asset',//asset會(huì)轉(zhuǎn)base64
                        parser: {//圖片優(yōu)化
                            dataUrlCondition: {
                                //小于10ke圖片轉(zhuǎn)base64
                                //優(yōu)點(diǎn)：減少請(qǐng)求數(shù)量 缺點(diǎn)：體積會(huì)更大
                                maxSize: 10 * 1024 // 10kb
                            }
                        },
                    },
                    {//處理其他資源
                        test: /\.(ttf|woff2|map4|map3|avi?)$/,//針對(duì)文件類型，正則
                        type: "asset/resource",//不會(huì)轉(zhuǎn)，原封不動(dòng)輸出
                    },
                    {
                        test: /\.jsx?$/,//處理的文件js+jsx
                        include: path.resolve(__dirname, "../src"), //只處理src文件
                        use: [
                            {
                                loader: "babel-loader",//只用一個(gè)
                                //提升性能
                                options: {
                                    cacheDirectory: true, // 開啟babel編譯緩存
                                    cacheCompression: false, // 緩存文件不要壓縮，壓縮需要時(shí)間 
                                },
                            },//這里不考慮多線程
                        ]
                    },
                ],
            },
            // vue-loader不支持oneOf
            {//處理vue資源
                test: /\.vue$/,
                loader: "vue-loader", // 內(nèi)部會(huì)給vue文件注入HMR功能代碼
                options: {
                    // 開啟緩存
                    cacheDirectory: path.resolve(
                        __dirname,
                        "node_modules/.cache/vue-loader"
                    ),
                },
            },]
    },
    // 插件-擴(kuò)展功能
    plugins: [
        //檢查eslint
        new ESLintPlugin({
            // 指定檢查文件的根目錄
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 默認(rèn)值-排除不處理
            cache: true, // 開啟緩存
            // 緩存目錄
            cacheLocation: path.resolve(
                __dirname,
                "../node_modules/.cache/.eslintcache"
            ),
        }),
        //處理html資源 自動(dòng)引入
        new HtmlWebpackPlugin({
            // 以 public/index.html 為模板創(chuàng)建新的html文件
            // 新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 DOM結(jié)構(gòu) 2. 自動(dòng)引入打包生成的js等資源
            template: path.resolve(__dirname, "../public/index.html"),
        }),

        // 提取css成單獨(dú)文件
        isProduction && new MiniCssExtractPlugin( // 定義輸出文件名和目錄
            {
                // 定義輸出文件名和目錄
                filename: "static/css/[name].[contenthash:10].css",
                //動(dòng)態(tài)導(dǎo)入也有css
                chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
            }),
        //復(fù)制public資源到index里面
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "../public"),//將public包含index文件
                    to: path.resolve(__dirname, "../dist"),//復(fù)制到dist目錄下 
                    globOptions: {
                        // 忽略index.html文件
                        ignore: ["**/index.html"],
                    },
                },
            ],
        }),
        new VueLoaderPlugin(),
        //定義cross_env定義環(huán)境變量給打包工具屬于
        //DefinePlugin定義環(huán)境變量給源代碼使用 從而解決vue3警告問題
        new DefinePlugin({
            __VUE_OPTIONS_API__: "true",
            __VUE_PROD_DEVTOOLS__: "false",
        }),
        //按需加載
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver({
                importStyle: "sass",//自定義主題 引入sass
            })],
        }),
    ].filter(Boolean),

    // 模式
    mode: isProduction ? "production" : "development",
    devtool: isProduction ? "source-map" : "cheap-module-source-map",
    //代碼分割
    optimization: {
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                // layouts通常是admin項(xiàng)目的主體布局組件，所有路由組件都要使用的
                // 可以單獨(dú)打包，從而復(fù)用
                // 如果項(xiàng)目中沒有，請(qǐng)刪除
                layouts: {
                  name: "layouts",
                  test: path.resolve(__dirname, "../src/layouts"),
                  priority: 40,
                },
                // 如果項(xiàng)目中使用element-plus，此時(shí)將所有node_modules打包在一起，那么打包輸出文件會(huì)比較大。
                // 所以我們將node_modules中比較大的模塊單獨(dú)打包，從而并行加載速度更好
                // 如果項(xiàng)目中沒有，請(qǐng)刪除
                elementUI: {
                  name: "chunk-elementPlus",
                  test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
                  priority: 30,
                },
                // 將vue相關(guān)的庫(kù)單獨(dú)打包，減少node_modules的chunk體積。
                vue: {
                  name: "vue",
                  test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,
                  chunks: "initial",
                  priority: 20,
                },
                libs: {
                  name: "chunk-libs",
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10, // 權(quán)重最低，優(yōu)先考慮前面內(nèi)容
                  chunks: "initial",
                },
              },  
        },
           
        // 提取runtime文件
        runtimeChunk: {//會(huì)導(dǎo)致緩存失效-處理
            name: (entrypoint) => `runtime~${entrypoint.name}`,
        },
        minimize: isProduction,
        //壓縮css
        minimizer: [
            // css壓縮也可以寫到optimization.minimizer里面，效果一樣的
            //壓縮css
            new CssMinimizerPlugin(),
            // 當(dāng)生產(chǎn)模式會(huì)默認(rèn)開啟TerserPlugin，但是我們需要進(jìn)行其他配置，就要重新寫了
            //壓縮js
            new TerserPlugin(),
        ],
    },

    //webpack解析模塊加載選項(xiàng)
    resolve: {
        //自動(dòng)補(bǔ)全文件擴(kuò)展名
        extensions: ['.vue', '.js', '.json'],
        alias: {
            // 路徑別名
            "@": path.resolve(__dirname, "../src"),
          },
    },
    performance: false,//關(guān)閉性能分析提升打包速度
};

到了這里，關(guān)于Webpack項(xiàng)目學(xué)習(xí)：Vue-cli（腳手架）-優(yōu)化配置 -ui庫(kù)element-plus+減小打包體積 -按需加載+自定義主題+優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！