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>
