webpack notes

alias

在开发过程中遇到这样的需求，在.vue的template或者style标签中使用图片，当组件嵌套比较深的时候，常常需要这样../../../images，一方面比较丑陋，一方面也不好维护

解决的方法是可以利用webpack的resolve的alias，虽然是在import的时候使用，但是其实导入其他内容的时候也能使用，只需要在字符串前面加上~，例如~@images/avatar.png，而且在import css文件的也可以，例如@import url('~@public/base.less')

lodash 按需加载

lodash在处理数据时是很方便的工具库，但是打包后的lodash大概有70KB，但是往往我们用不到那么多的函数，所以按需加载就很有必要了，下面介绍几个lodash按需加载的方法

1. per method packages
   lodash把每一个方法都发布了一个npm package，所以可以在直接使用的时候直接装需要的package，但是这样的方式还是比较verbose的，npm i -S lodash.isequal
   例如:

import isEqual from 'lodash.isequal'

2. 全路径引用
   在npm i -S lodash之后，在引用的时候使用每个方法的完整路径
   例如:

import isEqual from 'lodash/isequal'

3. babel-plugin-lodash, & lodash-webpack-plugin
   使用的时候和引入整个lodash的方式是一样的，但是通过babel-plugin-lodash的转译以后，会变成这样
   
   image.png

这样就可以满足我们按需加载，而且方便使用的需求，配置的使用只需要在.babelrc的"plugins"中加上lodash，然后在webpack加上插件即可