场景

当在优化项目的时候，因为打包出来的chunk-vendors体积太大，这是因为在项目中使用到的依赖和插件都默认打包到该文件当中，为缩小它的体积，优化页面加载速度，对插件和依赖采用外部CDN加载，这个时候就需要配置webpack的externals节点，并且在项目的index.html中有

问题与解决

我所遇到的问题是，在配置完externals节点之后，项目无法启动，控制台打印出了Vue is not defined的错误，其中vue就是我配置的其中一个，经过检查，我才发现，我将externals节点进行了全局的配置，即无论是开发环境还是发布环境都会使用到这个配置，而我引用外部CDN地址的script和link标签都配置在了发布环境，因此，在开发环境启动项目才会出现问题Vue is not defined。即开发环境用了CDN引入的方式，而在项目的index.html又缺少引入CDN的script和link标签。所以才找不到插件和依赖。配置代码如下：

module.exports = {
  chainWebpack: config => {
    //发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js');
      config.plugin('html').tap(args => {
        args[0].isProd = true;
        return args
      });
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    });

    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js');
      //定制开发模式标题
      config.plugin('html').tap(args => {
        args[0].isProd = false;
        return args
      })
    });
  }
}

写在最后： 若有误，请指正