vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置

更新時(shí)間：2024年10月10日 10:05:41 作者：你不講 wood

configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過(guò)對(duì)象或函數(shù)修改配置,簡(jiǎn)單直接；chainWebpack則使用WebpackChainAPI,適合復(fù)雜配置,兩者可以結(jié)合使用,以達(dá)到更精細(xì)的配置需求,幫助開發(fā)者優(yōu)化項(xiàng)目構(gòu)建

configureWebpack

介紹

configureWebpack 允許你在 Vue CLI 項(xiàng)目中直接修改 Webpack 的配置。

它可以通過(guò)一個(gè)對(duì)象或一個(gè)函數(shù)來(lái)實(shí)現(xiàn)。

如果你使用的是一個(gè)函數(shù)，那么它會(huì)接收默認(rèn)的 Webpack 配置作為參數(shù)，并且你應(yīng)該返回一個(gè)修改過(guò)的配置對(duì)象。

用法

configureWebpack 可以是一個(gè)對(duì)象或一個(gè)函數(shù)：

作為對(duì)象：

如果 configureWebpack 是一個(gè)對(duì)象，那么這個(gè)對(duì)象將會(huì)通過(guò) webpack-merge 合并到最終的 Webpack 配置中。
這種方式適合簡(jiǎn)單的配置修改。

作為函數(shù)：

如果 configureWebpack 是一個(gè)函數(shù)，那么它會(huì)接收默認(rèn)的 Webpack 配置作為參數(shù)。
函數(shù)可以修改配置并不返回任何東西，也可以返回一個(gè)被克隆或修改過(guò)的配置版本。
這種方式適合更復(fù)雜的配置修改，特別是當(dāng)你需要基于環(huán)境變量或其他條件動(dòng)態(tài)修改配置時(shí)。

常見配置示例

添加別名

const path = require("path");
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  }
};

修改輸出文件名

module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].chunk.js'
    }
  }
};

添加 Webpack 插件

module.exports = {
  configureWebpack: (config) => {
    config.plugins.push(
      new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: 'index.html',
      })
    );
  },
};

添加額外的 Loader

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.md$/,
          use: [
            'vue-loader',
            {
              loader: 'markdown-loader',
              options: {
                // markdown-loader 的選項(xiàng)
              }
            }
          ]
        }
      ]
    }
  }
};

修改性能提示

module.exports = {
  configureWebpack: (config) => {
    config.performance = {
      hints: false, // 關(guān)閉性能提示
      maxEntrypointSize: 500000,
      maxAssetSize: 300000,
    };
  },
};

修改優(yōu)化選項(xiàng)

module.exports = {
  configureWebpack: (config) => {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 去除 console
              drop_debugger: true, // 去除 debugger
            },
          },
        }),
      ],
    },
  },
};

示例

對(duì)象形式:

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');

function resolve(dir) {
  return path.join(__dirname, dir);
}
const name = '瀏覽器網(wǎng)頁(yè)標(biāo)題';
module.exports = {
  configureWebpack: (process.env.NODE_ENV === 'production') ? {
    name: name,
    plugins: [
      new WebpackObfuscator({ // js 混淆配置
        controlFlowFlattening: false,
        deadCodeInjection: false,
        ignoreImports: true, // 這里設(shè)置為true
        stringArrayThreshold: 0.3,
        //  壓縮代碼
        compact: true,
        // 是否啟用控制流扁平化(降低1.5倍的運(yùn)行速度)
        controlFlowFlattening: false,
        // 隨機(jī)的死代碼塊(增加了混淆代碼的大小)
        deadCodeInjection: false,
        // 此選項(xiàng)幾乎不可能使用開發(fā)者工具的控制臺(tái)選項(xiàng)卡
        debugProtection: false,
        // 如果選中，則會(huì)在“控制臺(tái)”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。
        debugProtectionInterval: false,
        // 通過(guò)用空函數(shù)替換它們來(lái)禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。
        disableConsoleOutput: true,
        // 標(biāo)識(shí)符的混淆方式 hexadecimal(十六進(jìn)制) mangled(短標(biāo)識(shí)符)
        identifierNamesGenerator: 'hexadecimal',
        log: false,
        // 是否啟用全局變量和函數(shù)名稱的混淆
        renameGlobals: false,
        // 通過(guò)固定和隨機(jī)（在代碼混淆時(shí)生成）的位置移動(dòng)數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。
        rotateStringArray: true,
        // 混淆后的代碼,不能使用代碼美化,同時(shí)需要配置 cpmpat:true;
        selfDefending: true,
        // 刪除字符串文字并將它們放在一個(gè)特殊的數(shù)組中
        stringArray: true,
        rotateUnicodeArray: true,
        //  stringArrayEncoding: 'base64',
        stringArrayEncoding: ['base64'],
        stringArrayThreshold: 0.75,
        // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對(duì)小型源代碼啟用此選項(xiàng)。
        unicodeEscapeSequence: false,
        // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對(duì)小型源代碼啟用此選項(xiàng)。
        transformObjectKeys: true,
      }, []),
    ],
    devtool: process.env.NODE_ENV === "production" ? "false" : "source-map",
    resolve: {
      alias: {
        "@": resolve("src"), // 添加別名 @
        'vue': path.resolve(__dirname, './', 'node_modules', 'vue') // 去重vue包,多個(gè)vue包會(huì)導(dǎo)致element-ui 里的 table 組件不生效
      },
    },
    // 打包生產(chǎn)環(huán)境時(shí)過(guò)濾console.log打印日志
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 去除 console
              drop_debugger: true, // 去除 debugger
            },
          },
        }),
      ],
    },
  } : {},
}

函數(shù)形式:

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');

function resolve(dir) {
  return path.join(__dirname, dir);
}
const name = '瀏覽器網(wǎng)頁(yè)標(biāo)題';
module.exports = {
	configureWebpack: (config) => {
	    config.name = name,
	      config.resolve = {
	        ...config.resolve,
	        alias: {
	          "@": resolve("src"), // 配置別名 @
	          'vue': path.resolve(__dirname, './', 'node_modules', 'vue') // 去重vue包,多個(gè)vue包會(huì)導(dǎo)致element-ui 里的 table 組件不生效
	        }
	      },
	      config.optimization = {
	        ...config.minimizer,
	        minimizer: [
	          new TerserPlugin({
	            terserOptions: {
	              compress: {
	                drop_console: true, // 去除 console.log
	                drop_debugger: true, // 去除 debugger
	              },
	            },
	          }),
	        ]
	      }
	
	    if (process.env.NODE_ENV === 'production') {
	      config.plugins.push(
	        new WebpackObfuscator({
	          // 壓縮代碼
	          compact: true,
	          // 是否啟用控制流扁平化(降低1.5倍的運(yùn)行速度)
	          controlFlowFlattening: false,
	          // 隨機(jī)的死代碼塊(增加了混淆代碼的大小)
	          deadCodeInjection: false,
	          // 此選項(xiàng)幾乎不可能使用開發(fā)者工具的控制臺(tái)選項(xiàng)卡
	          debugProtection: false,
	          // 如果選中，則會(huì)在“控制臺(tái)”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。
	          debugProtectionInterval: false,
	          // 通過(guò)用空函數(shù)替換它們來(lái)禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。
	          disableConsoleOutput: true,
	          // 標(biāo)識(shí)符的混淆方式 hexadecimal(十六進(jìn)制) mangled(短標(biāo)識(shí)符)
	          identifierNamesGenerator: 'hexadecimal',
	          log: false,
	          // 是否啟用全局變量和函數(shù)名稱的混淆
	          renameGlobals: false,
	          // 通過(guò)固定和隨機(jī)（在代碼混淆時(shí)生成）的位置移動(dòng)數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。
	          rotateStringArray: true,
	          // 混淆后的代碼,不能使用代碼美化,同時(shí)需要配置 cpmpat:true;
	          selfDefending: true,
	          // 刪除字符串文字并將它們放在一個(gè)特殊的數(shù)組中
	          stringArray: true,
	          rotateUnicodeArray: true,
	          //  stringArrayEncoding: 'base64',
	          stringArrayEncoding: ['base64'],
	          stringArrayThreshold: 0.75,
	          // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對(duì)小型源代碼啟用此選項(xiàng)。
	          unicodeEscapeSequence: false,
	          // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對(duì)小型源代碼啟用此選項(xiàng)。
	          transformObjectKeys: true,
	        })
	      )
	    }
	},
}

js 混淆參考文檔: 使用 webpack-obfuscator 進(jìn)行代碼混淆及報(bào)錯(cuò)解決方案

chainWebpack

介紹

chainWebpack 是 Vue CLI 提供的一種更強(qiáng)大的方式來(lái)修改 Webpack 的配置。

與 configureWebpack 不同，chainWebpack 使用 Webpack Chain API，它允許你以一種聲明式的方式來(lái)修改 Webpack 配置

用法

chainWebpack 接收一個(gè)函數(shù)，該函數(shù)接收一個(gè)基于 Webpack Chain API 的鏈對(duì)象作為參數(shù)。

你可以使用這個(gè)鏈對(duì)象來(lái)修改 Webpack 的配置

常用配置示例

修改 HTML 插件的選項(xiàng)

config.plugin('html').tap(args => {
  args[0].title = 'My App';
  return args;
});

** 修改模塊規(guī)則**

config.module
  .rule('images')
  .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
  .use('url-loader')
  .loader('url-loader')
  .options({
    limit: 10000,
    name: 'img/[name].[hash:7].[ext]'
  });

去除 debugger 語(yǔ)句

config.when(process.env.NODE_ENV === 'production', config => {
  config.optimization.minimize(true);
  config.optimization.minimizer('terser').tap(args => {
    args[0].terserOptions.compress.drop_debugger = true;
    return args;
  });
});

注意事項(xiàng)

使用 chainWebpack 時(shí)，請(qǐng)確保你了解 Webpack Chain API 的使用方法。
chainWebpack 和 configureWebpack 可以同時(shí)使用，它們會(huì)按照順序依次應(yīng)用。
如果你需要對(duì) Webpack 的配置進(jìn)行更復(fù)雜的操作，chainWebpack 提供了更強(qiáng)大的 API 來(lái)修改配置。

詳細(xì)示例

const path = require("path");
module.exports = {
  chainWebpack: (config) => {
    // 修改 HTML 插件的選項(xiàng)
    config.plugin('html').tap(args => {
      args[0].title = 'My App';
      return args;
    });

    // 修改模塊規(guī)則
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        name: 'img/[name].[hash:7].[ext]'
      });

    // 去除 debugger
    config.when(process.env.NODE_ENV === 'production', config => {
      config.optimization.minimize(true);
      config.optimization.minimizer('terser').tap(args => {
        args[0].terserOptions.compress.drop_debugger = true;
        return args;
      });
    });

    // 添加別名
    config.resolve.alias
      .set('@components', resolve('src/components'))
      .set('@assets', resolve('src/assets'));

    // 添加額外的插件
    config.plugin('define').tap(args => {
      args[0]['process.env'].VUE_APP_VERSION = JSON.stringify(process.env.VUE_APP_VERSION || '');
      return args;
    });

    // 修改輸出選項(xiàng)
    config.output.filename('[name].[contenthash].js');
  },
};

function resolve(dir) {
  return path.join(__dirname, dir);
}