关于webpack-cli4.0的相关配置（二）

注意：从cli3.0 开始，Webpack的配置文件从webpack.config.js变为了 vue.config.js

更多配置信息参考地址

（1）publicPath

• Type：string
• Default： ‘/’

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 (‘’) 或是相对路径 (‘./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

（2）outputDir 输出目录

（3）assetsDir

放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

（4）chainWebpack（参考地址）

是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

1. 修改 Loader 选项

// vue.config.js
module.exports = {
    
    
  chainWebpack: config => {
    
    
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
    
    
          // 修改它的选项...
          return options
        })
  }
}

2. 添加一个新的 Loader

// vue.config.js
module.exports = {
    
    
  chainWebpack: config => {
    
    
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

3. 替换一个规则里的 Loader

// vue.config.js
module.exports = {
    
    
  chainWebpack: config => {
    
    
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

4. 修改插件选项

// vue.config.js
module.exports = {
    
    
  chainWebpack: config => {
    
    
    config
      .plugin('html')
      .tap(args => {
    
    
        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}

5. 例：添加一个新的图片规则

// vue.config.js
module.exports = {
    
    
  config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
    
    
        options.limit = 10240; // 小于10kb的图片都转为base64
        return options;
      })
      .end()
      // 启用图片压缩功能
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
    
     bypassOnDebug: false })
      .end();
}

（5）configureWebpack

1. 简单的配置方式

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

// vue.config.js
module.exports = {
    
    
  configureWebpack: {
    
    
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

2. 基于环境有条件地配置

// vue.config.js
module.exports = {
    
    
  configureWebpack: config => {
    
    
    if (process.env.NODE_ENV === 'production') {
    
    
      // 为生产环境修改配置...
    } else {
    
    
      // 为开发环境修改配置...
    }
  }
}

（6）css

module.exports = {
    
    
  css: {
    
    
  extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true, // 开启 CSS source maps?
    requireModuleExtension: true, // 是否仅对文件名包含module的css相关文件使用 CSS Modules
    loaderOptions: {
    
    
      css: {
    
    
        // 这里的选项会传递给 css-loader
        modules: {
    
    
          localIdentName: '[local]_[hash:base64:8]' // 设定 CSS Modules 命名规则
        }
      },
      postcss: {
    
    
        // 这里的选项会传递给 postcss-loader
      }
    }
  }
}

注意：如果你在 css.loaderOptions.css 里配置了自定义的 CSS Module 选项，则 css.requireModuleExtension 必须被显式地指定为 true 或者 false，否则我们无法确定你是否希望将这些自定义配置应用到所有 CSS 文件中。

（7）devServer参考地址

1. 简单配置

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

module.exports = {
    
    
  devServer: {
    
    
    proxy: 'http://localhost:4000'
  }
}

将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

2. 更多配置

devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: '',
        changeOrigin: true // 允许跨域
        // pathRewrite: { '^/api': '' }
      }
    },
    open: false,
    inline: true, // 开启实时刷新
    // host: '0.0.0.0', // 允许外部ip访问
    port: 8024, // 端口
    https: false, // 启用https
    overlay: {
    
    
      warnings: true,
      errors: true
    } // 错误、警告在页面弹出
  }, 

基本配置

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin'); // js压缩插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    
    
  publicPath: '/', // 基本路径
  assetsDir: 'static',//生成的静态文件(相对于outputDir)
  outputDir: 'dist', // 输出文件目录
  filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件

  chainWebpack: config => {
    
    
    // 启用打包分析工具 BundleAnalyzer
    config.when(process.env.NODE_ENV_BUNDLE_ANALYZE === 'true', config => {
    
    
      config.plugin('BundleAnalyzerPlugin').use(BundleAnalyzerPlugin);
    });

    // 开启图片压缩
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
    
    
        options.limit = 10240; // 小于10kb的图片都转为base64
        return options;
      })
      .end()
      // 启用图片压缩功能
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
    
     bypassOnDebug: false })
      .end();

    /**
     * 将svg图片转为组件使用
     */
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.use('vue-svg-loader').loader('vue-svg-loader');

    // 配置Jquery
    config.plugin('provide').use(webpack.ProvidePlugin, [
      {
    
    
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      }
    ]);
  },

  configureWebpack: config => {
    
    
    if (process.env.NODE_ENV === 'production') {
    
    
      // 为生产环境修改配置...
      config.mode = 'production';
      // 将每个依赖包打包成单独的js文件
      const optimization = {
    
    
        runtimeChunk: 'single',
        splitChunks: {
    
    
          chunks: 'all', // async异步代码分割 initial同步代码分割 all同步异步分割都开启
          maxAsyncRequests: 30, // 按需加载时的最大并行请求数
          maxInitialRequests: 30, // 入口点的最大并行请求数
          minSize: 30000, // 生成 chunk 的最小体积（以 bytes 为单位）
          maxSize: 1024000, // 生成 chunk 的最大体积（以 bytes 为单位），对大于该值的js尝试做拆分
          automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符
          name: true, // 缓存组里面的filename生效，覆盖默认命名
          cacheGroups: {
    
     //缓存组，将所有加载模块放在缓存里面一起分割打包
            vendors: {
    
    
              test: /[\\/]node_modules[\\/]/,
              priority: -10,
              chunks: 'all',
              name(module) {
    
    
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                return `npm.${
      
      packageName.replace('@', '')}`;
              }
            },
            common: {
    
    
              name: `chunk-common`,
              minChunks: 2,
              priority: -20,
              chunks: 'all',
              reuseExistingChunk: true
            },
            element: {
    
    
              chunks: 'all',
              name: `element-ui`,
              test: /[\\/]element-ui[\\/]/,
              minChunks: 2,
              priority: 0
            },
            merges: {
    
    
              test: /[\\/]supplyAndDemand[\\/]|[\\/]src[\\/]src\/views[\\/]/,
              priority: 0,
              name: 'merges'
            }
          }
        },
        // 插件优化
        minimize: true,
        minimizer: [
          // js压缩插件
          new TerserPlugin({
    
    
            parallel: true,
            // sourceMap: true,
            terserOptions: {
    
    
              extractComments: false, // 注释剥离功能
              format: {
    
    
                comments: false // 删除所有注释
              },
              warnings: true,
              // parse: {},
              compress: {
    
    
                drop_console: true,
                drop_debugger: false,
                pure_funcs: ['console.log'] // 移除console
              }
            }
          })
        ]
      };
      Object.assign(config, {
    
    
        optimization
      });
    } else {
    
    
      // 为开发环境修改配置...
      config.mode = 'development';
    }
    Object.assign(config, {
    
    
      // 开发生产共同配置
      resolve: {
    
    
        alias: {
    
    
          // 别名配置
          '@': path.resolve(__dirname, './src'),
          '@s': path.resolve(__dirname, './src/static'),
          '@c': path.resolve(__dirname, './src/components')
        }
      }
    });
  },

  // css相关配置
  css: {
    
    
    extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true, // 开启 CSS source maps?
    requireModuleExtension: true, // 是否仅对文件名包含module的css相关文件使用 CSS Modules
    loaderOptions: {
    
    
      css: {
    
    
        modules: {
    
    
          localIdentName: '[local]_[hash:base64:8]' // 设定 CSS Modules 命名规则
        }
      }
    } // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
  },

  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  parallel: require('os').cpus().length > 1,

  // webpack-dev-server 相关配置
  devServer: {
    
    
    // proxy: {
    
    
    //   '/api': {
    
    
    //     target: '',
    //     changeOrigin: true // 允许跨域
    //     // pathRewrite: { '^/api': '' }
    //   }
    // },
    open: false,
    inline: true, // 开启实时刷新
    // host: '0.0.0.0', // 允许外部ip访问
    port: 8024, // 端口
    https: false, // 启用https
    overlay: {
    
    
      warnings: true,
      errors: true
    } // 错误、警告在页面弹出
  },

  // 第三方插件配置
  pluginOptions: {
    
    },

  lintOnSave: false //是否启用 eslint验证
};