vue.config.js配置优化

以下这段代码是否可以优化：

{
    chainWebpack: (config) => {
		config.plugin("provide").use(webpack.ProvidePlugin, [
		  {
			"window.Quill": "quill",
		  },
		]);
  },
  configureWebpack: (config) => {
    config.plugins.push(
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
      })
    );
  },
}

这段代码可以进一步优化，使配置更统一、简洁。可以将所有 ProvidePlugin 插件的配置放在一个地方，避免重复定义插件实例。这不仅使代码更清晰，还能减少维护成本。

优化后的代码

你可以将所有的 ProvidePlugin 配置集中在 configureWebpack 中，这样可以统一管理所有全局变量的注入。

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill',
        $: 'jquery',
        jQuery: 'jquery',
      }),
    ],
  },
};

详细解释

1. configureWebpack 中的 plugins 数组:
   • 将所有的 ProvidePlugin 插件实例集中在一个地方，可以使配置更加清晰和易于管理。
   • 通过 new webpack.ProvidePlugin({ ... }) 的方式，将所有需要全局注入的变量（如 window.Quill, $, jQuery）统一配置。

代码简化

原代码片段中的 chainWebpack 和 configureWebpack 分别定义了不同的 ProvidePlugin 配置，而这些配置完全可以合并到一个 ProvidePlugin 实例中，避免冗余。

完整的优化后的 vue.config.js 示例

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill',
        $: 'jquery',
        jQuery: 'jquery',
      }),
    ],
  },
};

额外优化

如果你还有其他需要使用 chainWebpack 进行链式配置的内容，可以将 chainWebpack 和 configureWebpack 结合起来使用。例如：

const webpack = require('webpack');
const path = require('path');

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

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill',
        $: 'jquery',
        jQuery: 'jquery',
      }),
    ],
  },
  chainWebpack: config => {
    // 示例：其他的 chainWebpack 配置
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).add(resolve('src/styles/formGenerator/icons')).end();

    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons')).add(resolve('src/styles/formGenerator/icons')).end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      });
  },
};

总结

通过上述优化，可以将 ProvidePlugin 的配置集中在一起，减少重复代码，提高配置文件的可读性和可维护性。同时，保留了 chainWebpack 用于其他链式配置的灵活性。