1.准备

高效的开发离不开高效的打包工作，在学习webpack之前我们需要了解一些关于Node.js和NPM相关的知识，在此只会写出基本的用法，以应对接下来要写的重点-webpack。

Node.js官网：https://nodejs.org/en/

NPM中文网：https://www.npmjs.cn/

2.Node.js和NPM相关知识（此乃重点，需专学之，以通小理，贯通古今）

1.安装下载（window版本）

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

2.安装步骤

步骤 1 : 双击安装包，如图1所示：

步骤 2 : 点击 Run(运行)，如图2所示：

步骤 3 : 勾选接受协议再点击 next（下一步），如图3所示：

步骤 4 : 安装目录选取再点击 next（下一步），如图4所示：

步骤 5 : 选择安装模式 , 然后点击下一步 next（下一步），如图5所示：

步骤 6 :点击 Install（安装），然后并点击 next（下一步），如图6所示：

步骤7：等待安装完成，如图7，图8，图9所示：

步骤8：检验是否安装成功

检验path中是否存在nodejs：开始=》运行=》输入"cmd" =》输入命令"path"

检验nodejs版本：开始=》运行=》输入"cmd" =》输入命令"node --version"

install-node-msi-version-on-windows-step1

图1 图2 图3

install-node-msi-version-on-windows-step4

图4 图5 图6

install-node-msi-version-on-windows-step7

图7 图8 图9

3.如图9所示，下载安装完node的同时NPM也被安装，接下来就要撸一撸NPM，开始：

1.npm可以理解成一个巨大无比的数据库，里面保存着好多好多的用于开发的包，只需下载就行；

2.安装一个包的语句：npm install "包的名称"，这里我得费几句话了：

（1）安装位置是当前目录的 node_modules 文件夹里（没有这个文件夹，没关系，它会自己创建的）；

（2）安装的版本原则是：package.json的版本为先，如果没有那就下载最新版本；

（3）在node环境中中，可以通过 var bao = require('包名'); 来使用你下载的包呦；

（4）如果想安装全局包，那语句就变了：npm install -g "包的名称"；

3.管理安装包，还是有所限定的有木有，那就要提到 package.json 了，具体包括：名称，版本，叙述等包相关信息；

3.webpack基础配置

1.本地创建一个文件夹，起名为 vuetest；

2.cmd进入dos系统，并进入刚刚创建的 vuetest文件夹，在此位置进行webpack的基础配置；

3.初始化配置：npm init ,有选的不用在意，回车到底，在 vuetest文件夹下会生成文件版本管理包：package.json;

4.本地安装webpack：npm install webpack --save-dev ,安装完成package 中就会出现webpack的字样了；

5.本地安装webpack-dev-server：npm install webpack-dev-server --save-dev ;这个用来提供启动服务器，接口代理等服务；

6.安装完成，查看package中是否存在 webpack webpack-dev-server；

4.vue组件在webpack中的书写

//一个简单的vue组件示例
<template>                         //自动封装的标签，无需再封装
    <div> 你好，{{name}} </div>    //组件的dom结构
</template>

<script>
    export default{          //ES6语法，导出这个组件的意思
        data:function(){     //组件内的data要写在回调函数中，原因是：组件会创建多个实例，避免共享数据
            name:"yjs"
        }
    }
</script>

<style scoped>            //scoped的作用是避免此css样式会影响其他组件或元素
    div{
        color:red;
    }
</style>

Vue提高篇-模块打包工具webpack