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

最新推荐文章于 2024-07-29 10:45:20 发布

原小明

最新推荐文章于 2024-07-29 10:45:20 发布

阅读量1k

点赞数

文章标签： vue webpack 简单环境

本文链接：https://blog.csdn.net/LABLENET/article/details/56483790

版权

一.需求

首先配置 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.