vue.config.js配置详解

1. vue inspect --rule  命令获取vue.config.js中的chainWebpack配置项

2. vue inspect --rule svg 筛选配置项·

const path = require("path");

function resolve(dir) {

    return path.join(__dirname, dir);

}

const port = 8080; // 端口号

const IS_PRODUCTION = process.env.NODE_ENV == "production"; // 正式环境

const CompressionPlugin = require("compression-webpack-plugin");

const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin");

/** key 是import 的包名，value 是CDN 为我们提供的全局变量名 */

const externals = {

    "ali-oss": "OSS"

};

module.exports = {

    // 放在服务器根目录下面的<服务器上项目所在的文件夹名>

    publicPath: "/",

    assetsDir: "static", // 输出的资源，所在的文件夹

    /** 去掉hash */

    filenameHashing: false,

    // 配置vscode调试工具

    configureWebpack: {

        devtool: 'source-map'

    },

    chainWebpack: config => {

        config.resolve.alias

            .set("@", resolve("src"))

            .set("assets", resolve("src/assets"))

            .set("components", resolve("src/components"))

            .set("views", resolve("src/views"));

        /** 如果是正式环境 */

        if (IS_PRODUCTION) {

            // 解决ie11兼容ES6

            config.entry("main").add("babel-polyfill");

            /** 删除懒加载模块的 prefetch preload，降低带宽压力(使用在移动端) */

            config.plugins.delete("prefetch").delete("preload");

            /** 阿里云SDK --不打包 */

            config.externals(externals);

            /** gzip 压缩 */

            config

                .plugin("compressionPlugin")

                .use(CompressionPlugin)

                .tap(() => [

                    {

                        test: /\.js$|\.html$|\.css/, //匹配文件名

                        threshold: 10240, //超过10k进行压缩

                        deleteOriginalAssets: false //是否删除源文件

                    }

                ]);

            /** 去掉console.log debugger sourceMap*/

            config.optimization.minimizer([

                new UglifyJsWebpackPlugin({

                    /**这个 sourceMap注释掉，默认就是置为false.(写为false 也是可以的)。

                     * 反之设为true 是生效的。

                     * 故在官方的配置(productionSourceMap: false)就可以注释掉了*/

                    sourceMap: false,

                    uglifyOptions: {

                        warnings: false,

                        compress: {

                            drop_console: true,

                            drop_debugger: true

                        }

                    }

                })

            ]);

            config.optimization.splitChunks({

                chunks: 'all',

                cacheGroups: {

                    elementUI: {

                        name: 'chunk-elementUI', // split elementUI into a single package

                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app

                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm

                    }

                }

            });

        }

        /** 有此插件就不用了去，图片压缩网站压缩图片了 */

        /** png、jpg图片压缩有效--已测试 jpg图片压缩图片质量变差*/

        config.module

            .rule("images")

            .use("image-webpack-loader")

            .loader("image-webpack-loader")

            .options({

                bypassOnDebug: true

            })

            .end();

        /** 文件名称hash 三种规则 */

        /**hash chunkhash contenthash */

        // config.output.filename("[name].[contenthash].js").end();

    },

    devServer: {

        port: port, // 端口号

        host: "10.13.5.21",

        https: false, // https:{type:Boolean}

        open: false, //配置自动启动浏览器

        overlay: {

            warnings: false,

            errors: true

        },

        proxy: 'http://10.13.5.192:8091'

        // proxy: 'http://10.13.5.155:8081'

        // proxy: 'http://10.13.5.150:8081'

        // proxy: 'http://shyboy.ngrok2.xiaomiqiu.cn'

    },



    css: {

        loaderOptions: {

            stylus: {

                "resolve url": true,

                import: []

            }

        }

    }

};

svg 用例(切换loader)（阿里图标库就不用再生成一套新的字体来替换了）

const path = require("path");

function resolve(dir) {

    return path.join(__dirname, dir);

}
chainWebpack(config) {
        config.module.rule('svg')
            .exclude.add(resolve('src/icons'));
        
        // 添加svg-sprite-loader
        config.module.rule('icons')
            .test(/\.svg$/) //设置test
            .include.add(resolve('src/icons')) //加入include
              .end() // add完上下文进入了数组，使用end回退
            .use('svg-sprite-loader') // 添加loader
              .loader('svg-sprite-loader') // 切换上下文到loader  
              .options({symbolId: 'icon-[name]'}) //指定选项
              .end()
    }

一般使用使用方法

import '@/icon/svg/demo.svg'

<svg>

   <use xlink:href="#icon-demo" ></use>

</svg>

组件封装方法

图标自动导入原理：webpack 的require.context自动导入

// icon/index.js

   获取当前目录 同级目录svg下为上下文， 这样req 就是只加载svg 目录下的模块函数
   第二个参数是不往下递归
   第三个参数是正则匹配规则
   import Vue from 'Vue' 
   import Icon from '@/components/Icon.vue'
   const req = require.context('./svg', false, /\.svg$/)

   req.keys().map(req)
   // Icon组件全局注册一下
   Vue.component("Icon", Icon);

// main.js

   import ./icon/index.js

// components/Icon.vue
    
   <template>
      <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
          <use :xlink:href="iconName" />
      </svg>
   </template>

   <script>
   export default {
     name: 'Icon',
     props: {
     iconClass: {
       type: String,
       required: true
     },
     className: {
       type: String,
       default: ''
     }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

// 使用方法与自定义icon样式

<Icon icon-class="qq" class-name="myicon"></Icon>