Vue.config.js各个属性说明

查看webpack配置项目规则指令

vue inspect --rule images

查看vue所有webpack的配置项

vue inspect

查看webpack插件配置项目

vue inspect --plugins +[option] //option可选，可以是插件的名称

vue.config.js所有配置字段属性说明

module.exports = {
  lintOnSave: false,
  publicPath: "/", // 使用/表示部署在域名的根路径上，如果部署在子路径上需要加上子路径的名称
  /*
  *如果这个值使用"”或者相对路径"./“这样所以的资源都会被连接为相对路径，这样打包出来的包可以部署在任意路径
  *pages构建多应用的时候
  */
  outputDir: "build",
  /**
   * 生产环境构建产生目录，构建的时候会被清除
   * 
   * */
  assetsDir: "resource",
  /**
   * 放置静态资源的目录
   * 
   * */
  indexPath: "main.html", /**
指定输入单页面文件名称,相对路径
*/
  filenameHashing: true, /**
文件指纹策略
*/
  productionSourceMap: false,/**
生产环境不需要sourcemap,设置为false,加速生产环境构建
*/
  integrity: true,/**
在html中link和script标签开启subresourec  integrity,在CSDN中可以提供额外的安全性
*/
  configureWebpack: {
    /**
     * 对象，最后合并到webpack中国
     * */
  },
  chainWebpack: config => {
    /**
     * 函数
     * */
  },
  css: {
    // 设置css
    requireModuleExtension: true,/**
设置为true,只有已.module.[ext]结尾的文件才会看做css Modules模块，设置为false,会将所有的.css scss.sacc...文件当做CsS
*/
    extract: true,/**
生产环境为true,开发环境为false,表示是否提取到一个独立的CSS文件中
*/
    sourceMap: true,/***
是否对CSS 开启sourcemap，开启将会影响构建性能

*/
    loaderOptions: {
      /**
       * 想loader传递参数
       * */
      css: {
        // 这里向css-loader传递
      },
      postcss: {
        // 向postcss传递
      }
    },
  },
  devServer:{
    // webpack-web-ser设置，比如设置代理
    // proxy:"http://localhost:4000" ,
    /**
    代表任何请求都会代理到
    */
    proxy:{
      '^api':{
        target:"http://localhost:4000",
        ws:true,
        changeOrigin:true
      }
    }
    
  }

}

实例配置一个svgloader 和修改imageslimit大小实例

chainWebpack: config => {
    /**
     * 函数
     * */
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, "src/icon"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
      .end()
      // config.module
      .rule("svg")
      .exclude.add(path.resolve(__dirname, "src/icon"))
      .end()
      .rule("images")
      .use("file-loader")
      .options({
        limit: 4096
      })
      .end()
  },