利用WebPack构建VUE项目

一、构建项目

1，首先新建一个目录，名为 myProject ，这是我们的项目根目录。然后在根目录下使用 ****npm init -y**** 命令，在我们的项目中生成 package.json 文件，因为我们的项目要有很多依赖，都是通过npm来管理的，而npm对于我们项目的管理，则是通过package.json文件。

2，我们新建一个叫做 app 的目录，这个是我们页面模块的目录，再在app目录下建立一个index目录，假设这个是首页模块的目录，然后再在index目录下建立一个 index.html 文件和 index.js 文件，分别是首页入口html文件和主js文件，然后再在index目录下建立一个components目录，这个目录用作存放首页组件模块的目录，因为我们最终要实现组件化开发。

二、通过npm安装项目依赖项在根目录（myProject）下执行以下命令

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev

npm install vue --save

完成后，你的package.json应该是这样的：

{
  "name": "myProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^1.0.28"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-runtime": "^5.8.38",
    "css-loader": "^0.25.0",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.4",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

我们安装了 babel 一系列包，用来解析ES6语法，因为我们使用ES6来开发项目，如果你不了解ES6语法，建议你看一看阮老师的教程，然后我们安装了一些loader包，比如css-loader/vue-loader等等，因为webpack是使用这些指定的loader去加载指定的文件的。

另外我们还使用 npm install vue –save 命令安装了 vue ，这个就是我们要在项目中使用的vue.js，我们可以直接像开发nodejs应用一样，直接require(‘vue’);即可，而不需要通过script标签引入，这一点在开发中很爽。

三，编辑**html、js、vue文件

index.html

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>首页</title>
 </head>
 <body>
  <!-- vue的组件以自定义标签的形式使用 -->
  <favlist></favlist>
 </body>
</html>

index.js

import Vue from 'Vue'
import Favlist from './components/Favlist'

new Vue({
 el: 'body',
 components: { Favlist }
})

Favlist.vue

****3****、在****components****目录下新建一个**** Favlist.vue ****文件，作为我们的第一个组件********

<template>
    <div v-for="n in 10">div</div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello World!'
            }
        }
    }
</script>

<style>
    html{
        background: red;
    }
</style>

我们在index.html中使用了自定义标签（即组件），然后在index.js中引入了Vue和我们的Favlist.vue组件，Favlist.vue文件中，我们使用了基本的vue组件语法，最后，我们希望它运行起来，这个时候，我们就需要webpack了。

四、配置**webpack服务

1、在项目根目录下新建 build 目录，用来存放我们的构建相关的代码文件等

2、然后在build目录下新建 webpack.config.js 这是我们的webpack配置文件，webpack需要通过读取你的配置，进行相应的操作。

webpack.config.js

// nodejs 中的path模块
var path = require('path');

module.exports = {
    // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
    entry: path.resolve(__dirname, '../app/index/index.js'),
    // 输出配置
    output: {
        // 输出路径是 myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: 'static/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue']
    },
    module: {
        
        loaders: [
            // 使用vue-loader 加载 .vue 结尾的文件
            {
                test: /\.vue$/, 
                loader: 'vue'   
            },
            {
                test: /\.js$/,
                loader: 'babel?presets=es2015',
                exclude: /node_modules/
            }
        ]
    }
}

3、构建项目

上例中，相信你已经看懂了我的配置，入口文件是index.js文件，配置了相应输出，然后使用 vue-loader 去加载 .vue 结尾的文件，接下来我们就可以构建项目了，我们可以在命令行中执行：

webpack --display-modules --display-chunks --config build/webpack.config.js

这个时候，我们修改 index.html ，将输出的js文件引入：
注意：html中的script标签的src路径为你项目根目录中生成的output->static->main.xxxxx.js,哈希值是不同的，故需要手动修改下

index.html

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>首页</title>
 </head>
 <body>
  <!-- vue的组件以自定义标签的形式使用 -->
  <favlist></favlist>

  <script src="../../output/static/main.ce853b65bcffc3b16328.js"></script>
 </body>
</html>

此时，你的Vue已经能够渲染出来了。但是，也有一个很严重的问题就是，你每次修改后，都要重新构建项目，生成一个main.xxx.js文件，这显然不是我们要达到的目的。而webpack也不会这么的愚蠢，所以我们需要安装几个webpack插件来解决这个问题

五,添加node服务，实现webpack的打包加载

1.首先安装 html-webpack-plugin 插件：
在根目录下输入命令安装：

npm install html-webpack-plugin --save-dev

2.修改build文件就夹的webpack.config.js文件

// nodejs 中的path模块
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
 entry: path.resolve(__dirname, '../app/index/index.js'),
 // 输出配置
 output: {
  // 输出路径是 myProject/output/static
  path: path.resolve(__dirname, '../output/static'),
  publicPath: 'static/',
  filename: '[name].[hash].js',
  chunkFilename: '[id].[chunkhash].js'
 },
 resolve: {
  extensions: ['', '.js', '.vue']
 },
 module: {

  loaders: [
   // 使用vue-loader 加载 .vue 结尾的文件
   {
    test: /\.vue$/,
    loader: 'vue'
   },
   {
    test: /\.js$/,
    loader: 'babel?presets=es2015',
    exclude: /node_modules/
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   filename: '../index.html',
   template: path.resolve(__dirname, '../app/index/index.html'),
   inject: true
  })
 ]
}

根目录下再次执行构建命令：

webpack --display-modules --display-chunks --config build/webpack.config.js

构建完成后，应该在输出目录，多出来一个index.html文件，双击它，代码正确执行，你可以打开这个文件查看一下，webpack自动帮我们引入了相应的文件。

问题继续来了，难道每次我们都要构建之后才能查看运行的代码吗？那岂不是很没有效率?别急

3.安装 webpack-dev-middleware中间件和webpack-hot-middleware中间件，进行加载

1）

npm install webpack-dev-middleware webpack-hot-middleware --save-dev

2）

npm install express --save-dev

4，下面我们在build目录中创建一个 dev-server.js 的文件，并写入一下内容：

// 引入必要的模块
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config')

// 创建一个express实例
var app = express()

// 调用webpack并把配置传递过去
var compiler = webpack(config)

// 使用 webpack-dev-middleware 中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

// 注册中间件
app.use(devMiddleware)

// 监听 8888端口，开启服务器
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})

别急我们要对我们的 webpack.config.js 配置文件做两处修改：
1）将 config.output.publicPath 修改为 ‘/‘：
2）将 plugins 中 HtmlWebpackPlugin 中的 filename 修改为 ‘app/index/index.html’

此时在项目根目录执行以下命令启动服务：
命令：

node build/dev-server.js

当看到如下提示，则代表开启服务成功了：

Listening at http://localhost:8888
Hash: 2b9c279685625d1c9154
Version: webpack 1.13.2
Time: 7888ms
                       Asset       Size  Chunks             Chunk Names
main.2b9c279685625d1c9154.js     287 kB       0  [emitted]  main
               ../index.html  439 bytes          [emitted]
Child html-webpack-plugin for "../index.html":
            Asset    Size  Chunks       Chunk Names
    ../index.html  552 kB       0
webpack: bundle is now VALID.

服务启动成功，接下来就可以打开浏览器，输入：
http://localhost:8888/app/index/index.html

OK，大功告成，今天就到这里，当开启服务后，你每次修改代码保存后直接刷新页面即可看到显示。

目前为止并没有启动真正的热加载模式（代码保存后浏览器自动更新页面而不需手动刷新的模式），实际因为现在热加载模式开发还有很多问题，且当项目越来越大时，延迟越来越严重，机器负载也很大，故还没完善前就先不写出来了，另外大家也可以去多探索探索！祝大家好运

最后编辑于：2017.12.04 05:23:20

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,198评论 4赞 359
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,663评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,985评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,673评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,994评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,399评论 1赞 211
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,717评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,407评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,112评论 1赞 239
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,371评论 2赞 241
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,891评论 1赞 256
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,255评论 2赞 250
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,881评论 3赞 233
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,010评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,764评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,412评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,299评论 2赞 260

利用WebPack构建VUE项目

一、构建项目

二、通过****npm****安装项目依赖项在根目录（myProject）下执行以下命令

三，编辑****html****、****js****、****vue****文件**

index.html

index.js

Favlist.vue

四、配置****webpack****服务**

1、在项目根目录下新建 build 目录，用来存放我们的构建相关的代码文件等

2、然后在build目录下新建 webpack.config.js 这是我们的webpack配置文件，webpack需要通过读取你的配置，进行相应的操作。

webpack.config.js

3、构建项目

五,添加node服务，实现webpack的打包加载

OK，大功告成，今天就到这里，当开启服务后，你每次修改代码保存后直接刷新页面即可看到显示。

推荐阅读更多精彩内容

二、通过npm安装项目依赖项在根目录（myProject）下执行以下命令

三，编辑**html、js、vue文件

四、配置**webpack服务