一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
本文将详细介绍如何利用webpack搭建一个vue脚手架，包括项目结构、配置、构建等方面的详细讲解和注释。该文章主要面向对webpack有一定了解但不熟悉的同学，旨在帮助大家更好地理解webpack和vue的结合使用。
一、适用人群
1. 对webpack知识有一定了解但不熟悉的同学。
2. 女同学！！！！
二、目的
在自己对webpack有进一步了解的同时，也希望能帮到一些刚接触webpack的同学。脚手架已放上github，不想听我啰嗦的同学可以直接去download或clone下来看哦。脚手架里都有详细注释！
三、脚手架结构
├── 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 项目构建入口
四、配置
4.1 生成package.json文件
使用npm init命令生成一个package.json文件
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"
}
五、构建脚手架目录
同学们可以通过自己的习惯和喜爱搭建自己的脚手架目录，下面讲解以上面脚手架结构为准！
六、构建config/config.js
6.1 该文件主要用来配置构建开发环境和生产环境差异化的参数。
6.2 const _path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// vue-loader基本配置
const baseVueLoaderConf = {
... ...
}
通过本文，我们可以学习到如何利用webpack搭建一个vue脚手架，包括项目结构、配置、构建等方面的详细讲解和注释。
