您的位置：首页 > Web前端 > Node.js

FE - 走向Node与Webpack 之路 - vue 与 webpack 简单开发环境

2017-02-22 13:11 806 查看

一.需求

首先配置 webpack 入口文件，输出文件，然后开启 webpack-dev-server , 修改入口文件内容，更新到html中，html使用vue占位显示；

环境安装：

确保 node 与 npm 环境已有，webpack 与 webpack-dev-server全局已安装（非必要）;

npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install vue -D // -D 缩写 ： --save-dev

二. 实现

入口文件

vue 2.0 使用的时候，需要注意

commonJS 引入 require(‘vue/dist/vue.js’)

Babel 引入 import Vue from ‘vue/dist/vue.js’;

entry.js

/**
* Created by yuan on 2/22/2017.
*/
var Vue = require("vue/dist/vue.js");

//将Hello vue.js 数据显示在h1 标签上
new Vue({
el: "h1",
data: {
message: "Hello  vue.js"
}
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<!--注意：vue占位-->
<h1>{{message}}</h1>
<!--注意： bundle.js 是要生成的目标名称-->
<script src="bundle.js"></script>
</body>
</html>

webpack.config.js 实现

/**
* Created by yuan on 2/22/2017.
*/
var webpack = require('webpack');

module.exports = {
entry: {
main: './entry.js' //入口文件
},
output: {
filename: 'bundle.js', //生成的目标js
path: __dirname //当前文件夹
}
}

运行

在当前项目文件夹下执行

D:\webworkspace\webpack-examples\example4>webpack-dev-server
Project is running at http://localhost:8080/ webpack output is served from /
Hash: 41ad31c1cb80e45087bb
Version: webpack 2.2.1
Time: 4267ms
Asset    Size  Chunks                    Chunk Names
bundle.js  537 kB       0  [emitted]  [big]  main
chunk    {0} bundle.js (main) 523 kB [entry] [rendered]
[35] (webpack)-dev-server/client?http://localhost:8080 5.28 kB {0} [built]
[36] ./entry.js 168 bytes {0} [built]
[37] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[38] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[39] (webpack)-dev-server/~/ansi-html/index.js 4.26 kB {0} [built]
[40] (webpack)-dev-server/~/ansi-regex/index.js 135 bytes {0} [built]
[42] (webpack)-dev-server/~/html-entities/index.js 231 bytes {0} [built]
[48] (webpack)-dev-server/~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[74] (webpack)-dev-server/~/strip-ansi/index.js 161 bytes {0} [built]
[77] (webpack)/hot/emitter.js 77 bytes {0} [built]
[78] (webpack)/~/events/events.js 8.33 kB {0} [built]
[82] (webpack)/~/querystring-es3/index.js 127 bytes {0} [built]
[83] (webpack)/~/url/url.js 23.3 kB {0} [built]
[85] ../~/vue/dist/vue.js 224 kB {0} [built]
[86] multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js 40 bytes {0} [built]
+ 72 hidden modules
webpack: Compiled successfully.

访问： http://localhost:8080/

结果：

修改内容

修改入口文件的内容 entry.js

/**
* Created by yuan on 2/22/2017.
*/
var Vue = require("vue/dist/vue.js");

new Vue({
el: "h1",
data: {
message: "Hello webpack &  vue.js"
}
});

保存后，会自动编译构建：

webpack: Compiling...
Hash: 9f4b0f11b0bfc14cc10e
Version: webpack 2.2.1
Time: 153ms
Asset    Size  Chunks                    Chunk Names
bundle.js  537 kB       0  [emitted]  [big]  main
chunk    {0} bundle.js (main) 523 kB [entry] [rendered]
[36] ./entry.js 178 bytes {0} [built]
+ 86 hidden modules
webpack: Compiled successfully.

浏览器会立马更新结果：

三.示例地址

vue与webpack简单开发环境

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue webpack 简单环境

相关文章推荐

新的分享

章节导航