在使用Vue开发时，我们大多数会使用官方的vue-cli，主要特点包括：
- 基于webpack构建，带有合理的默认配置
- 快速零配置原型开发
- 包含丰富的官方插件集合
通过它我们可以快速开发一个完整的系统。本文就带领大家从零开始来搭建一个最精简、可运行、基于webpack3构建的Vue(2.x)项目。这能让我们了解到webpack和vue在我们日常开发中所处的地位，帮助我们学习或回顾webpack一些配置属性。
从零开始搭建Webpack+Vue项目
CSS预处理器中使用Webpack alias配置
在使用 webpack 构建项目时，经常会使用到 resolve.alias 的功能。它可以用来创建 import 或 require 的别名，使得模块引入变得更简单。1
2
3alias: {
'@': 'src/components'
}
现在，可以替换替换原有的导入路径方式：1
2
3
4// before
import component from "src/components/component"
// after
import component from "@/component"
在CSS预处理器的@import中使用alias
@import存在于 css 中，而 css 是由 css-loader 来进行处理的，所以在处理过程中并不能使用 webpack loader 的 alias 配置。下面的引入将不会生效：1
@import "@/reset.css"
使用 ~ 标识符
想要在 css 中使用 alias，可以采用如下解决方案：1
@import "~@/reset.css"
~的作用是告诉 webpack，当前 import 的路径是使用 alias 配置进行导入。
可以点击这里查看该css-loader Issues详情
