这里的$符合是正则的文末匹配符，即只有当vue是最后一级路径时，webpack才会将该值解析成别名，进行别名与对应值替换，如vue/test.js中的vue是不会当作别名解析的，而components/header.js中的components则会按照声明的components别名进行解析，其结果是src/components/header.js。
resolve.extensions
该值定义解析模块时的查找文件的后缀顺序，如["", ".js", ".json"]，会优先返回js文件，其次json文件，然后是其他文件，注意，这里数组传入了一个空字符串，他的作用是在未找到配置中所有列举的类型文件时，支持webpack返回其他类型文件，但是webpack2.x版本修改了，不支持传入空字符。
webpack插件配置
webpack还支持多种多样的插件拓展，你可以使用它们对你的项目webpack模块构建过程进行额外处理，如代码压缩，图片等资源提交压缩，构建异常捕获和提升，构建流程时间消耗比，等等，而关于这些插件使用的配置在plugins属性数组内，将在后续进行介绍。
项目本地调试与开发
为了方便开发和调试，通常都需要在本地主机开启服务，提供局域网内多终端访问，并且在文件变更时，实时刷新页面，正如grunt和gulp中Browsersync插件提供的功能一样，webpack可以使用webpack-dev-server模块实现。
webpack-dev-server是一个Node.js的express服务器，以webpack开发中间件的形式为webpack包提供服务，当监听到源码文件变更时，会自动重新打包，并且支持配置自动刷新浏览器，重新加载资源。
安装
由于该插件只用于开发模式，所以通过以下npm指令安装：
npm install webpack-dev-server --save-dev
配置
启用webpack-dev-server时，其默认开启8080端口，访问localhost:8080返回当前目录下的index.html，即执行指令当前目录下的静态资源，当然可以通过指令传递参数或在配置文件进行配置指定静态资源目录。
另外需要注意的是，开启webpack-dev-server后，变更文件重新打包后，并不会实际输出到配置的output目录，而是在publicPath属性声明的相对路径所在的内存中读取。
静态资源目录配置（CONTENT BASE）
webpack-dev-server --content-base src/
执行以上指令开启服务后，webpack-dev-server将默认在src/目录返回静态资源，当然也可以在webpack.config.js配置文件中指定：
devServer: {
contentBase: './src'
}
访问http://localhost:8080和http://localhost:8080/index.html效果一样，均返回src目录下的index.html文件。
PUBLICPATH与输出文件访问