很多 Vue 的初学者想尝试这个框架时，都被 webpack 过于复杂的配置所吓倒，导致最后无法跑出一个期望的 hello word 效果。今天我就把我第一次使用 webpack 打包一个 Vue Hello World 应用的所有步骤详细记录下来，供 Vue 的初学者参考。
安装 nodejs 和 npm，这两个就不用说了，网上很多教程。
本地随便新建一个文件夹，进入后运行命令 npm init, 一路 next 下去，自动生成 package.json。
运行命令 npm install –save-dev webpack-dev-server，安装一个轻量级的服务器，该服务器用于 vue 应用开发完毕后的本地测试。
重复执行命令 npm install –save-dev <name>，也就是把下列命令粘贴到 cmd 里进行执行：
npm install –save-dev css-loader
npm install –save-dev vue-template-compiler
npm install –save-dev webpack
npm install –save-dev vue-loader
npm install –save-devvue-router
参数 -save-dev 的效果是让这些安装的 module 出现在 package.json 的 devDependencies 区域内，如下图红色区域所示：
这些都是开发时依赖。我们再用下列命令安装运行时依赖：
npm install –save vue vuex
然后再在 package.json 里手动加入如下这一段内容：
目的是开发完毕后，使用命令 npm run dev 可以启动 webpack-dev-server，运行我们的 vue 应用，并带上参数 –inline –hot。
在项目文件夹根目录下创建一个名为 src 的文件夹，文件夹里新建一个文件 index.vue，把如下内容拷贝进去：
<style>
h2{
color: red;
}
</style>
<template>
<h2>Jerry: Hello, World!</h2>
</template>
<script>
module.exports = {
data: function(){
return {};
}
}
</script>
再回到根目录下，新建一个文件 main.js:
import Vue from ‘vue’;
import AppJerry from ‘./src/index.vue’
new Vue({
el: “#demo”,
components: {
app: AppJerry
}
});
这段代码首先将我们在 src 文件夹的 index.vue 里实现的应用导出，存储到变量 AppJerry 里，再将这个应用安装到 html 页面 id 为 demo 的 div 标签里。安装是通过创建 Vue 实例并将 div 元素的 id 传入构造函数里进行的。当然，我们还没创建 html 文件，所以马上创建一个名为 index.html 的文件：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>hello world</title>
</head>
<body>
<div id=”demo”>
<app></app>
</div>
<script src=”dist/build.js”></script>
</body>
</html>
我们注意到这个 index.html 里引用了一个 dist/build.js 的文件，这个文件用来干嘛的？
这里就不得不提 webpack 在现代前端开发技术中起的重要作用了。WebPack 可以看做是模块打包机：它做的事情是，分析我们的前端项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言，比如 Scss，TypeScript 等，并将其打包为合适的格式以供浏览器使用。具体到我们这个例子，就是说 webpack 把我们 src 文件夹下的 index.vue 打包转换成浏览器能识别的 js 文件，webpack 的输出就是 dist 文件夹下的 build.js 文件。
为了让 webpack 清楚地知道它要完成什么样的任务，我们通过创建一个配置文件 webpack.config.js 来完成 webpack 任务指定。
这个配置文件的内容：
var path = require(‘path’);
module.exports = {
entry: ‘./main.js’,
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/dist/’,
filename: ‘build.js’
},
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: ‘vue-loader’
},
{
test: /\.(png|jpg|eot|svg|ttf|woff)/,
loader: ‘url?limit=40000’
}
]
}
}
里面定义了 webpack 执行任务的入口是 main.js 文件，任务输出的文件夹是项目文件夹里的 dist 目录，输出文件是 build.js, webpack 扫描的文件通过 vue-loader 指定，特征是以.vue 结尾的文件。
到目前为止，这个基于 Vue 的 hello world 应用的开发和配置都结束了，是不是很简单？
我们可以来测试了。
直接在命令行里敲 webpack 命令，就会自动执行打包操作，并在控制台上看到 build.js 文件成功生成的消息：
这个打包后的文件尺寸很大，有 323KB，包含了 vue.js 本身的内容和我们 index.vue 里的转换后的内容。下图高亮区域就是我们 index.vue 里的实现被 webpack 处理后生成对应的 JavaScript 代码。
使用 npm run dev 启动 webpack-dev-server，看到提示说在 localhost:8080 上可以访问我们的应用了。
浏览器里访问，看到 Hello World 的输出，说明我们成功地走完了一个基于 webpack 的 Vue 应用开发流程。
要获取更多 Jerry 的原创文章，请关注公众号 ” 汪子熙 ”:
uto-orient/strip%7CimageView2/2/w/1240)