vue.config.js 代码优化

前面文章中的代码配置已经很简洁明了，但我们可以进一步优化和改进它，使其更加模块化和可维护。以下是一些可能的优化方法：

1. 提取 resolve 函数

将 resolve 函数提取到模块外部，避免每次都重新定义它：

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

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

module.exports = {
  chainWebpack: config => {
    // 移除默认的 svg 处理规则
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).add(resolve('src/styles/formGenerator/icons')).end();

    // 添加新的 svg-sprite-loader 规则
    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 插件
    config.plugin('provide').use(webpack.ProvidePlugin, [
      {
        'window.Quill': 'quill',
      },
    ]);
  }
};

2. 使用变量保存路径

使用变量保存路径，避免重复调用 resolve：

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

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

const iconsPath = resolve('src/assets/icons');
const formGeneratorIconsPath = resolve('src/styles/formGenerator/icons');

module.exports = {
  chainWebpack: config => {
    // 移除默认的 svg 处理规则
    config.module.rule('svg').exclude.add(iconsPath).add(formGeneratorIconsPath).end();

    // 添加新的 svg-sprite-loader 规则
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(iconsPath).add(formGeneratorIconsPath).end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      });

    // 使用 ProvidePlugin 插件
    config.plugin('provide').use(webpack.ProvidePlugin, [
      {
        'window.Quill': 'quill',
      },
    ]);
  }
};

3. 使用函数封装配置

使用函数封装每个部分的配置，使代码更具可读性和可维护性：

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

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

const iconsPath = resolve('src/assets/icons');
const formGeneratorIconsPath = resolve('src/styles/formGenerator/icons');

function configureSvgSpriteLoader(config) {
  // 移除默认的 svg 处理规则
  config.module.rule('svg').exclude.add(iconsPath).add(formGeneratorIconsPath).end();

  // 添加新的 svg-sprite-loader 规则
  config.module
    .rule('svg-sprite-loader')
    .test(/\.svg$/)
    .include.add(iconsPath).add(formGeneratorIconsPath).end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]',
    });
}

function configureProvidePlugin(config) {
  // 使用 ProvidePlugin 插件
  config.plugin('provide').use(webpack.ProvidePlugin, [
    {
      'window.Quill': 'quill',
    },
  ]);
}

module.exports = {
  chainWebpack: config => {
    configureSvgSpriteLoader(config);
    configureProvidePlugin(config);
  }
};

4. 使用外部文件存储配置

将配置分离到单独的文件中，使主配置文件更简洁：

webpack.config.svg.js

const path = require('path');

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

const iconsPath = resolve('src/assets/icons');
const formGeneratorIconsPath = resolve('src/styles/formGenerator/icons');

module.exports = function configureSvgSpriteLoader(config) {
  // 移除默认的 svg 处理规则
  config.module.rule('svg').exclude.add(iconsPath).add(formGeneratorIconsPath).end();

  // 添加新的 svg-sprite-loader 规则
  config.module
    .rule('svg-sprite-loader')
    .test(/\.svg$/)
    .include.add(iconsPath).add(formGeneratorIconsPath).end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]',
    });
};

webpack.config.provide.js

const webpack = require('webpack');

module.exports = function configureProvidePlugin(config) {
  // 使用 ProvidePlugin 插件
  config.plugin('provide').use(webpack.ProvidePlugin, [
    {
      'window.Quill': 'quill',
    },
  ]);
};

vue.config.js

const configureSvgSpriteLoader = require('./webpack.config.svg');
const configureProvidePlugin = require('./webpack.config.provide');

module.exports = {
  chainWebpack: config => {
    configureSvgSpriteLoader(config);
    configureProvidePlugin(config);
  }
};

总结

通过上述优化方法，可以使 vue.config.js 配置文件更简洁、模块化和易于维护。这样的结构使得每个配置部分独立且自包含，方便将来进行扩展和修改。