教你用webpack搭一个vue脚手架[超详细讲解和注释！]

1.脚手架结构

├── 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                 项目构建入口

2.配置npm 

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

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

    npm init

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

   npm install webpack webpack-dev-server -g

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

  npm install webpack webpack-dev-server -D

2.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。
  也可以通过npm run build 打包项目文件进行线上部署.
  scripts.build命令解读：
  通过node命令构建build文件夹下的build.js。
  命令的配置可以根据自己脚手架的配置文件位置和名称不同修改哦！

3.构建脚手架目录

同学们可以通过自己的习惯和喜爱搭建自己的脚手架目录,下面讲解以上面脚手架结构为准！

4.构建config/config.js

4.1 该文件主要用来配置构建开发环境和生产环境差异化的参数.
4.2

const _path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

//vue-loader基本配置
const baseVueLoaderConf = {
  //引入postcss插件
  postcss: {
    config: {
      path: _path.resolve("../")
    }
  },
  //转为require调用,让webpack处理目标资源!
  transformToRequire: {
    video: "src",
    source: "src",
    img: "src",
    image: "xlink:href"
  }
};

//vue-loader 开发环境配置
const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
  //loaders
  loaders: {
    css: ["vue-style-loader", "css-loader"],
    less: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"]
  },
  cssSourceMap: true
});

//vue-loader 生产环境配置
const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
  //loaders
  loaders: ExtractTextPlugin.extract({
    use: ["css-loader", "postcss-loader", "less-loader"],
    fallback: "vue-style-loader"
  }),
  cssSourceMap: false
});

//开发/生产环境 配置参数！
module.exports = {
  dev: {
    publicP