vue-loader小技巧

preserveWhitespace

场景:开发 vue 代码一般会有空格,这个时候打包压缩如果不去掉空格会加大包的体积 配置preserveWhitespace可以减小包的体积

{ vue: { preserveWhitespace: false } }

transformToRequire

场景:以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件

// page 代码 <template> <div> <avatar :img-src="imgSrc"></avatar> </div> </template> <script> export default {created () { this.imgSrc = require('./assets/default-avatar.png') } } </script>

现在:通过配置 transformToRequire 后，就可以直接配置，这样vue-loader会把对应的属性自动 require 之后传给组件

// vue-cli 2.x在vue-loader.conf.js 默认配置是 transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } // 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改 avatar: ['default-src'] // vue-cli 3.x 在vue.config.js { vue: {transformToRequire: {avatar: ['default-src'] } } } // page 代码可以简化为 <template> <div> <avatar img-src="./assets/defaultavatar.png"></avatar> </div> </template>