webpack 重点是webPack下的vue.js项目文件结构

以下内容学自《vue.js快速入门》（申思维），十分推荐新手看这本书上手vue。其中实战部分尤为精彩！

webpack

开发初衷

SPA单页应用的发展，随着项目不断复杂，包括的js css png等文件越来越多，导致文件夹结构混乱，难以管理。为了解决这个问题，出现了webpack【一个打包工具，可以将js css 图片等等打包在一起】

功能

对文件的支持

• 支持普通文件
• 支持代码文件
• 支持文件转url（图片）

对json的支持

JSON
一种轻量级数据交换格式

常用的数据交换格式：
XML
JSON
YAML

• 支持普通JSON
• 支持JSON5
• 支持CSON

对JS预处理器的支持

• 支持普通的javascript

• 支持babel（使用es2015+）

• 支持Traceur（使用es2015+）

• 支持TypeScript

  TypeScript 是一种给 JavaScript 添加特性的语言扩展

• 支持coffeescript

  coffeescript是Javascript的转译语言

  例如：可以将类似 Ruby 语法的代码编译成 JavaScript

对模板的支持

• 支持普通的HTML

• 支持pug模板

  pug改名前叫jade （一种模板引擎）

  模板引擎：web应用中动态生成html的工具，负责将数据和模板结合

• 支持markdown模板

• 支持postHTML

  PostHTML 即为 HTML 的处理器，输入 HTML，经过一系列的修改，输出新的 HTML

• 支持Handlebars

  Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板

对style的支持

• 支持普通style
• 支持import
• 支持less
• 支持sass/scss
• 支持stylus
• 支持postcss

对各种框架的支持

• 支持三大主流框架 vue react angular

• 支持Riot

  Riot 是一个新的Ruby测试框架

安装

npm install --save-dev webpack

webPack下的vue.js项目文件结构

build

build文件夹中保留了各种打包脚本，是不可或缺的，不可随意修改

• build.js

  • 打包使用不可修改

• check-version.js

  • 检查npm的版本，不能修改

• dev-client.js

• dev-server.js

以上两个文件是在开发时使用的服务器脚本，不能修改

• utils.js

  • 不能修改，做一些css/sass等文件的生成

• vue-loader.conf.js

  • 非常重要的配置文件，不能修改。内容是用于辅助加载vue.js用到的css source map等

    source map

    随着代码增多，我们需要对代码进行压缩。代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试

    http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

• webpack.base.conf.js

• webpack.dev.conf.js

• webpack.prod.conf.js

以上三个文件是基本配置文件不能修改

config

与部署和配置有关

• dev.env.js

  • 开发模式下的配置文件，一般不可修改

• prod.env.js

  • 生产模式下的配置文件，一般不可修改

• index.js

  • 很重要的文件，定义了开发时的端口（默认8080）、图片文件夹（默认static）、开发模式下的代理服务器

dist

项目完成打包之后形成的文件夹

• static

• css

  • app.css

    • 编译后的css文件

  • app.css.map

• js

  • app.js

    • 最核心的js文件，几乎所有的代码逻辑都打包到这里

  • app.js.map

  • manifest.js

    • 生成的周边文件

  • manifest.js.map

  • ventor.js

    • 生成的ventor.js

      ventor.js
      用于创建交互性图形的javascript库

  • ventor.js.map

• index.html

node_modules

• 存放项目用到的第三方包
• 创建：npm install
• 按照package.json中定义的第三方包自动下载
• 内含几百个文件夹

src

核心源代码的所在目录

• assets

  • 资源目录

    • xxx.png

• components

  • 放视图和组件

    • xxxx.vue
    • xxxx.vue

• router

  • index.js

    • 路由文件，定义了各个页面对应的url

• App.vue

  • 主组件，所有页面都在其下切换

• main.js

  • 入口文件，初始化vue实例引入插件

• store

  存放 vuex[vue专门开发的状态管理器

  • index.js 入口文件

  • mutation-types.js 存放vuex常用的变量

  • state.js 相当于数据库

里面定义了数据结构，一些数据的初始状态
- getters.js 顾名思义 取用，不做修改
- mutation.js state数据的修改操作
- action.js 调用mutation方法对数据进行操作

static

• static保存的是项目的静态资源文件，webpack打包的时候不会打包该文件夹下的资源

index.html

• 入口文件，默认的主渲染页面文件

package.json

• 项目描述文件

我目前开发过程中src实际的目录