使用webpack打包Vue工程
前言
入行一年，从什么都不懂的小白，到现在什么都懂一点的小白，也算是飞跃了。感叹一下现在的前端，从nodejs出来到现在各种各样的工具如雨后春笋般的出现。大神们疯狂的造轮子，玩的不亦乐乎。我等小白们，疯狂追赶，学的心肝脾肺都快衰竭。而我的精力也仅限浅尝辄止，但是学多一点总有好处的。本篇文章就是介绍如何使用webpack构建前端工程。
目标
本次的工程以Vue.js为主角，Vue.js是一款小巧优雅而且强大的轻量级mvvm框架，配合webpack模块化打包。制作出如下图的效果。仅仅搭一个框架，会用上很多插件和加载器。
环境准备
主要是一些全局的nodejs包
Nodejs
npm
webpack
less
sudo npm install webpack -g // -g 代表全局安装webpack，调出命令行即可使用webpack命令 sudo npm install less -g // -g 全局安装 less to css 转换器
开始
1. 初始化工程
创建工程文件夹 new 并定位到 new
mkdir new && cd new
使用npm初始化工程
npm init
根据需要设置项目的信息， 也可以一路回车，使用默认信息，默认项目名称为文件夹名（项目名称不要设置成某个模块名，否则将来你引用摸个模块的时候会报错）
name: (new) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: new author: fz license: (ISC) { "name": "gt", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "new" ], "author": "fz", "license": "ISC" } Is this ok? (yes)
之后文件夹下会生成一个package.json,记录了项目的详细信息，包括了各种依赖和插件。
2. 创建目录以及webpack配置文件
├── dist // 编译之后输出文件的目录 ├── src // 应用逻辑代码存放区域 │ ├── lib // 存放npm上找不到的第三方库 │ │ ├── backbone.js │ │ └── underscore.js │ ├── static // 存放静态资源 │ │ └── logo.png │ ├── app.html // 部件模板 │ ├── app.js // 部件代码 │ └── app.less // 部件样式 ├── index.html // 应用首页模板 ├── index.js // 应用入口 ├── package.json // 工程配置文件 └── webpack.config.js // webpack配置文件
现在的目录结构，文件都是空白的，等一下把他们补上。
3. 安装webpack各中模块的loader（加载器）和插件以及我们需要的模块
npm install --save less // 本地按装less npm install --save less-loader // less模块的加载器，配合下面css-loader 和 style-loader npm install --save css-loader // css 模块加载器 npm install --save style-loader // 以上两个插件的根基 npm install --save url-loader // 用来处理 图片 字体 的模块，是由下面file-loader封装的。可自定义文件名 npm install --save file-loader npm install --save html-loader // 加载html文件用的 npm install --save text-loader // 加载纯文本用的 npm install --save html-webpack-plugin // 生成html文件插件 npm install --save extract-text-webpack-plugin // 单独提取css文件插件 npm install --save webpack // 提供webpack对象 npm install --save webpack-dev-server // webpack-server开发包，方便调试 npm install --save vue npm install --save jquery
4. 完成后的package.json
{ "name": "new", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --hot --inline", // 用户启动 webpack-dev-server 用于用户调试 --hot 代表热替换 ， --inline 模式。。不太清楚。 "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "new" ], "author": "fz", "license": "ISC", "dependencies": { "bootstrap": "^3.3.6", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.22.0", "jquery": "^2.1.4", "less": "^2.7.1", "less-loader": "^2.2.3", "style-loader": "^0.13.1", "text-loader": "0.0.1", "url-loader": "^0.5.7", "vue": "^1.0.26", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" } }
3. 编写webpack.config.js配置文件
webpack配置文件比较复杂，需要做一下说明：webpack作为一款模块打包器，其管理的单元就是模块，webpack的模块指的不仅仅是js，包括了样式，图片，字体，模板等等。不同的模块需要相应的loader作为加载器进行加载。