一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）

Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。16年10月Vue发布了2.x版本，经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。

本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

一.适用人群

   1.对webpack知识有一定了解但不熟悉的同学.

    2.女同学！！！(233333….)

二.目的

在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同学.

脚手架已放上github,不想听我啰嗦的同学可以直接去download或clone下来看哦.

脚手架里都有详细注释！

源码：https://github.com/webfansplz/xc-cli.git  （本地下载）

觉得有帮助到你的同学给个star哈,也算是对我的一种支持！

三.脚手架结构

├── build  构建服务和webpack配置
 |—— build.js webpack打包服务
 |—— webpack.base.conf.js webpack基本通用配置
 |—— webpack.dev.conf.js webpack开发环境配置
 |—— webpack.prod.conf.js webpack生产环境配置
├── config  构建项目不同环境的配置
├── public  项目打包文件存放目录
├── index.html  项目入口文件
├── package.json 项目配置文件
├── static  静态资源
├── .babelrc  babel配置文件
├── .gitignore  git忽略文件
├── postcss.config.js postcss配置文件
├── src  项目目录
 |—— page  页面组件目录
 |—— router  vue路由配置
 |—— store  vuex配置
 |—— App.vue  vue实例入口
 |—— main.js  项目构建入口

四.配置npm scripts
4.1 生成package.json文件,配置npm scripts.

4.1.1 使用 npm init 命令,生成一个package.json文件!

npm init

4.1.2 全局安装webpack和webpack-dev-server

npm install webpack webpack-dev-server -g

4.1.3 在项目目录下安装webpack和webpack-dev-server

npm install webpack webpack-dev-server -D

4.1.4 进入package.json配置npm scripts命令

 "scripts": {
 "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
 "start": "npm run dev",
 "build": "node build/build.js"
 }

  通过配置以上命令：

  我们可以通过npm start/npm run dev在本地进行开发,

  scripts.dev命令解读:

  通过webpack-dev-server命令 启动build文件夹下webpack.dev.conf.js。