由搭建Vue.js了解webpack,vue-loader和热重载
译文地址
Vue.js build set-up from scratch with webpack, vue-loader and hot reload
正文
Vue.JS 是我现在最喜欢的JavaScript视图库，在这篇文章中，我将向你解释如何使用Vue.JS、热模块修改、webpack以及整个vue生态系统建立一个项目，这样你就能更好的理解你的应用是如何工作的了。
介绍
从2007年至今，我已经使用JavaScript开发了很长时间，我喜欢angular，我喜欢react和ember，我能看到这些框架背后的动机和辉煌，但真正让我感到兴奋的框架是VueJS，他不是解决所有问题的完美方案，但我(以及很多人)看到了其中蕴含的价值。
在JavaScript中有一个整体趋势，尤其在react社区，让库专注于做好一件事，并允许用户将各种碎片以最好的方式粘在一起。这种方式很棒并且为大量的人服务，这对于初学者来说有一点压迫性。我受到了这篇文章的启发写下了这个教程,有大量的react模板在这-有些是过时的，有些有问题，而有些则无法工作，这些对于初学者而言都是痛苦的。
在写这篇文章的时候，Vue的开发者正在开发”官方入门套件”，其中包含一个脚手架CLI来帮助构建一个新工程。这为开发带来了一个简单清晰而又可良好维护的出发点。
当然，搭建一个你自己的开发环境仍有很多好处：
- 对比使用模板，你自己的工程依赖会更加顺手。
- 如果有依赖不可用或你想要一些更新的东西，比如依赖一个预处理器或工具链，你可以直接将他引入而不会破坏构建流程。
- 模板也许使用了某些你不需要的东西或库。
也就是说，模板和脚手架，尤其是那些发布的作者会更加了解库的价值，而你可以利用他们来学习并了解其原理，在你学习源码之后你就可以选择使用他们的模板。
请注意，在我写作的同时我也在不断学习一些新的东西，这篇文章我会经常更新。
在开始之前
我最后修改这些说明是在2015年12月28日，我已经在Ubuntu Linux上使用最新的稳定版Node.js(5.3)测试过。
在命令行运行命令如下所列
$ ls <- Run this in root directory of our project
$ (public/) ls <- Run this in the 'public' directory第一部分：建立基础结构
让我们从一个空的文件夹开始建立一个名为”myapp”的工程，这将是未来所有说明的root文件夹
$ mkdir myapp
$ cd myapp/在root文件夹建立一个package.json，至此我们还没有依赖。
{
"name": "myapp",
"version": "0.0.1",
"description": "My app",
"dependencies": {
},
"devDependencies": {
},
"author": "You"
}在root文件夹建立一个index.html，这将是提供给浏览器的实际html。
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Exampletitle>
head>
<body>
<h3>{{ message }}h3>
<script src="dist/build.js">script>
body>
html>注意关于这个html文件的两件事：
1. 它使用了dist/build.js，而这一个JS文件还没有创建
2. 他有一个{{ message }}片段，其数据将由vue在稍后填充
建立一个文件夹src并增加一个文件src/main.js：
import Vue from 'vue'
new Vue({
el: 'body',
data: {
message: "Hello Vue"
}
})至此我们已经有了基础vuejs应用的骨架，但他还需要构建完成。
第二部分：基础webpack构建
在你的root文件夹下新建一个文件名为webpack.config.js，在其中填充代码：
module.exports = {
// 这是包含其他模块的主文件
entry: './src/main.js',
// 编译好的文件应该放哪？
output: {
// 路径在dist文件夹下
path: './dist',
// 文件名为`build.js`，因此完整的路径为dist/build.js
filename: 'build.js'
},
module: {
// 特殊编译规则
loaders: [
{
// 请求webpack检查：如果文件以.js结尾，则应用转换
test: /\.js$/,
// 使用babel进行转换
loader: 'babel',
// 不转换node_modules文件夹(不需要编译)
exclude: /node_modules/
}
]
}
}在你的root文件夹下新建一个文件.babelrc，Babel是用于转换ES6到当前JavaScript版本的工具，它需要用presets配置，Vue依赖es2015preset（支持下一代EcmaScript/JavaScript）和stage-0（我不知道这是干嘛的[译者注：stage-0为ES7不同阶段语法提案的转码规则，此为第一阶段]）
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}安装webpack命令行工具：
$ npm install -g webpack安装本地库需要构建（如dev dependencies，开发依赖），我们可以将他增加到你的package.json的devDependencies部分。
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.12.2",在你完成package.json的更新后，执行：
$ npm install注意：我建议使用官方Vue初始化套件以得到最好的支持版本，因为有时最新版本的依赖库并不会得到最好的支持。
最后，为你的主程序安装vuejs库，你需要将其放在dependencies中。
$ npm install --save vue现在你可以使用WebPack构建你的应用，在你的root目录下执行：
$ webpack你应该可以看到如下输出：
Hash: 6568e32467dc12c8aeeb
Version: webpack 1.12.9
Time: 743ms
Asset Size Chunks Chunk Names
build.js 246 kB 0 [emitted] main
+ 3 hidden modules在你的浏览器中打开index.html，如果你看到”Hello Vue”，那么至此一切OK，恭喜你，你有了一个基础的VueJS工程。
第三部分：vue-loader和.vue文件
现在我们将要开始vuejs中很棒的一个部分：使用.vue文件创建组件。
如下更新你的index.html：
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Exampletitle>
head>
<body>
<app>app>
<script src="dist/build.js">script>
body>
html>注意，对比在body节点中建立一个简单的视图模型(ViewModel)，我们安装一个名为app的组件并架设在
如下修改你的main.js：
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
components: { App }
})现在，注意我们从app.vue文件中提取了一个名为App的新组件，并将其包含到body元素的实例中。
我们将创建一个名为src/app.vue的文件，将下列代码加入app.vue中：
<template>
<div class="message">{{ msg }}div>
template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
script>
<style>
.message {
color: blue;
}
style>在这个文件中：我们设置了一种样式，在script中定义了行为，并在template中定义了HTML模板。想要学习组件是如何工作的，你需要查看vuejs的文档。
现在我们重新执行webpack并且看看会发生什么：
Hash: c71cc00f645706203ac4
Version: webpack 1.12.9
Time: 749ms
Asset Size Chunks Chunk Names
build.js 246 kB 0 [emitted] main
[3] ./src/app.vue 0 bytes [built] [failed]
+ 3 hidden modules
ERROR in ./src/app.vue
Module parse failed: /home/anirudh/work/misc/vue-scaffold/example/src/app.vue Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| "message">{{ msg }}
|
@ ./src/main.js 7:11-31Webpack不知道如何处理.vue文件，幸运的是这很容易修改解决，打开你的webpack配置，更新如下代码：
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
}
}现在，在你的package.json的devDependencies部分增加如下项：
"css-loader": "^0.23.0",
"style-loader": "^0.13.0",
"vue-loader": "^7.3.0",
"vue-html-loader": "^1.0.0",执行npm install来取得新的库
$ npm install最后，再次执行webpack，你会看到如下输出：
Hash: 740a1d3c85161f03a0cf
Version: webpack 1.12.9
Time: 1355ms
Asset Size Chunks Chunk Names
build.js 258 kB 0 [emitted] main
+ 11 hidden modules如果你打开浏览器，你应该可以看到蓝色的”Hello from vue-loader”，这就意味着样式、HTML和javascript都被正确编译。作为奖励给你一张Darcy的照片。
第四部分：热模块替换/热重载
热模块替换或热重载是JavaScript世界中最热的新技术，这允许你节约JavaScript文件并实时更新组件。
这是基础逻辑：
- 你写了一个应用。
- 你在浏览器中加载这个应用，并开始使用这个应用。
- 这个应用有一个’state’，Vue使用这个值来渲染页面。
如果你要做出改变或修复一个小bug，你需要重载这个页面，并重复所有步骤以使得应用回到初始state。
有了热重载，工程流程变得不同：
- 打开应用，将其带入给定的state
- 更新源码并保存
- Webpack检查修改，他会只重新编译改变的模块
- Webpack发送代码并使用如浏览器上的websockets改变在线应用
- Vue使用新的模块并热重载你的代码，重新展示你的页面的同时保持state完整
第一步，我们需要使用WebPack的开发服务但不是在浏览器中以一个html文件打开它。首先，更新package.json中的devDependencies：
"vue-hot-reload-api": "^1.2.0",如下执行：
$ npm install
$ npm install -g webpack-dev-server
$ webpack-dev-server --inline --hot当你运行webpack-dev-server，你会看到一堆输出：
http://localhost:8080/
webpack result is served from /dist/
content is served from /home/anirudh/work/misc/vue-scaffold/example
Hash: ef5ed1df9062de968cb6
Version: webpack 1.12.9
Time: 1773ms
Asset Size Chunks Chunk Names
build.js 511 kB 0 [emitted] main
chunk {0} build.js (main) 465 kB [rendered]
[0] multi main 52 bytes {0} [built]
[2] (webpack)-dev-server/client?http://localhost:8080 2.48 kB {0} [built]
[3] (webpack)/~/url/url.js 22.3 kB {0} [built]
[... omitted for brevity ...]
[85] ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/app.vue 58 bytes {0} [built]
[86] ./~/vue-hot-reload-api/index.js 5.62 kB {0} [built]
webpack: bundle is now VALID.在浏览器中打开http://localhost:8080，你会看到同样的输出，但这还没有显示出Vue的HMR有多棒。改变你的src/app.vue:
<template>
<div class="message">Value is: {{ count }}div>
<a href="#" @click="increment">Incrementa>
template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count ++;
}
}
}
script>
<style>
style>重载http://localhost:8080，你会看到一个计数器，同时有一个按钮，点击这个按钮，计数器就会增加。
现在，更新代码，你可以改变样式、改变按钮名称甚至是increment功能改造，如果你保存了代码，组件便会更新。
后续内容
你的工程可能并不需要所有这些东西，但这是你应该知道的vue相关内容。在你开始构建应用前，有一些事情是需要你花点时间搜索和创建的：
区分开发/产品构建
对于产品，你需要一个分离的压缩版的构建，你可以看看vuejs的建议vue-loader-example webpack config
注意，将你的webpack.config移动到一个分离的文件夹需要你更多的配置。
测试
测试在本教程范围之外，并且你的测试策略依赖于你的应用本身，可以看 vue-loader-example test example是如何测试的。
使用图像，静态文件和CSS工作
如果你的应用需要传统的CSS文件和图像，webpack可以帮助你，使用file-loader，url-loader等适当的加载器并提高开发流程。
注意
你可以通过eslint-loader配置eslint，vue-loader-example是一个很好的例子，同时一个好的eslintrc可以很好的保障eslint的工作。