vue-cli3.0 config配置

今天在对vue-cli3+进行配置vue.config.js配置做个记录，
本人配置

const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin')

const UglifyJsPlugin  = require('uglifyjs-webpack-plugin');// 打包时去除consolelog等信息

const webpack = require('webpack')

//版本号
let { version } = require('./package.json');
version = version.replace(/\./g,'_');


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

module.exports = {
    // publicPath:process.env.NODE_ENV === 'production' ? './' : '/',
    //基本路径
    publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
    // 输出文件目录
    // outputDir: 'dist',
    outputDir: process.env.NODE_ENV === 'production' ?'ezh':'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: {
            // 文件名
            filename: 'css/[name].[contenthash:5].css',
            chunkFilename:'css/[name].[contenthash:5].css',
        },
        // 开启 CSS source maps?
        sourceMap: false,

    },
    pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // webpack-dev-server 相关配置
    devServer: {
        open: true,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
        host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
        port: 8080,
        hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
        https: false,
        hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
        proxy: {
            '/api': {
                target: 'http://loadhost:8080', //目标接口域名
                secure: false, //false为http访问，true为https访问
                ws: true,
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': ''
                }
            }
        }, // 设置代理
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        // before: app => { }
    },
    // 第三方插件配置
    pluginOptions: {
    },
  
    // webpack配置
    chainWebpack: (config) => {
        //对images进行处理
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .tap(options => {
                // 修改它的选项...
                options.fallback.options.name = 'img/[name].[ext]?'; //去除图片hash
                options.limit = 1024 * 10; //这是字节(Byte)限制，1KB = 1024Byte ,当图片的大小小于 1KB ,则会被转为 base64格式，打包进js文件，大于1KB,则会被打包进 img 文件夹，供链接请求获取。
                return options
            });

        // 修复HMR
        config.resolve.symlinks(true);
        // 别名配置 // 开发生产共同配置
        config.resolve.alias
            .set('@', path.resolve('./src'))
            .set('@a', path.resolve('./src/assets'))
            .set('@c', path.resolve('./src/components'))
            .set('@v', path.resolve('./src/view'));
            // .set('jquery$', 'jquery/dist/jquery.min.js');
    },
    //webpack配置
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            // 将每个依赖包打包成单独的js文件
            let optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name (module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                            }
                        }
                    }
                },
            
                minimizer: [
                ]
            };


            Object.assign(config, {
                optimization,
                //给文件添加版本号
                output:{
                    ...config.output,
                    filename: `static/js/[name].[contenthash:5].${version}.js`,
                    chunkFilename: `static/js/[name].[contenthash:5].${version}.js`
                },
                // 插件配置
                plugins:[
                    ...config.plugins,
                ]
            })
        } else {
            // 为开发环境修改配置...
            config.mode = 'development'
          
        }


    }
};

参考配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  publicPath: './',
  //文件名hash
  filenameHashing: false,
  //生成source map
  productionSourceMap: false,
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '管理后台',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      //chunks: ['chunk-vendors', 'chunk-common', 'index']
      cdn: {
        js: [
          'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',
          'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
          'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
          'https://cdn.bootcss.com/element-ui/2.13.0/index.js'
        ],
        css: [
          'https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css'
        ]
      }
    }
  },
  devServer : {
    proxy : {
      '/adapter/' : {
        target : 'http://localhost',
        changeOrigin : true,
        pathRewrite : {
        '^/adapter/' : '/'
        }
      }
    }
  },
  configureWebpack: config => {
 
    // 开发时也使用cdn是为了方便和版本统一 当然也可以本地时用node_modules，发布用cdn
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ELEMENT'
    }
 
    // 为生产环境修改配置
    if (process.env.NODE_ENV === 'production') {      
 
      config.plugins.push(
        // 使用UglifyJsPlugin去掉console 可以略微降低文件大小
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true,
              drop_console: true,  //生产环境自动删除console
            },
            warnings: false,
          },
          sourceMap: false,
          parallel: true //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
        })
      );
    }
  }
  
}

参考链接