Webpack-打包工具

Webpack介绍：

一款前端资源打包工具，可以将JavaScript、image、css等资源
当成一个模块进行打包，Webpack是基于node.js

Node.js介绍：

什么是 Node.js，众所周知 javascript 是在浏览器上运行的脚本语
言，主要用来控制 html 元素，即 html dom 对象，是纯粹的 客户端语言。
那么要和服务端交互，就需要等待服务端的开发人员，而服务端开发又以 
java 居多，对于不了解 java　语言的前端开发人员，有的时候就不得不干等
着服务端准备好，很多时候，青春就在这样的尬等中消逝了。
那么于是就有人想，如果服务端也是用 javascript 开写的话，那么前端人员
不是很容易也可以开发服务端的东西了吗？ 于是就有大佬开发了一个 v8 引
擎，它在服务端运行 javascript 语言，在这个基础上再进行了一定的发展，
就出现了可以在服务端运行的 javascript， 它就叫做 node.js 了。
可以把 node.js 简单的看成 javascript 写的 tomcat ... 

cnpm介绍：

npm 命令用于从国外的服务器上下载别人做好的模块。 因为是在国
外的服务器，有的时候网速会很受影响，其结果就是导致下载会非常卡顿。
所以这个时候就会用到 cnpm了。这里的c 是 copy的意思，即复制 npm 上面
的库。
把npm 上面的库复制到 国内的服务器上，当需要用的时候，使用 cnpm 命令
获取，就会快很多了。 

安装Node.js

1、下载安装
2、cmd测试：node  -v

安装cnpm和npm

1、安装指令：npm install -g cnpm --registry=https://registry.npm.taobao.org
2、测试是否成功：cnpm -v
3、配置cnpm的下载路径：
a) cnpm config set prefix "E:\system\web-xczx\Node.Js\cnpm_modules"
b) cnpm config set cache "E:\system\web-xczx\Node.Js\cnpm_cache"
cmd测试配置是否成功：cnpm config ls

4、配置npm的下载路径：
a) npm config set prefix "E:\system\web-xczx\Node.Js\npm_modules"
b) npm config set cache "E:\system\web-xczx\Node.Js\npm_cache"
cmd测试配置是否成功：npm config ls

5、path环境配置（npm的prefix地址）：E:\system\web-xczx\Node.Js\npm_modules

6、安装nrm：cnpm install -g nrm
6-1、查看镜像：nrm ls
6-2、设置淘宝镜像： nrm use taobao

7、安装node-sass：npm install node-sass
7-1、查看版本：node-sass -v

图片.png

安装babel

1、bable是es6转es5的转码器
2、指令：npm install --global babel-cli
3、验证：babel --version

4、安装es2015
5、指令：npm install babel-preset-es2015 --save-dev
6、安装成功看图

图片.png

安装webpack

1、全局安装指令： cnpm install -g webpack@1.13.2
2、cmd测试：webpack

图片.png

使用webpack打包（命令方式）

1、写一个model.js文件，内容：document.write("hello webpack");
2、切换到该js文件下，执行： webpack  model.js  bundle.js
3、写一个html文件，引入bundle.js，写法如下：
<script src="bundle.js"></script>
4、访问html文件

使用webpack打包（Vue方式）

1、写一个model.js文件，内容：document.write("hello webpack");
2、再写一个webpack.config.js文件，内容：
module.exports = {
    entry:'./model.js',
    output:{
        filename: 'bundle.js'
    }
}
3、切换到mode.js文件下，执行命令：webpack

webpack-dev-server（命令行）

前面是直接通过浏览器打开 index.html 的页面，这种情况与实际的项目是有
区别的，因为实际项目通常都会是在一个服务器上打开 index.html.
webpack-dev-server 是什么呢？ 它其实就是一个微服务器，运行它，也就启
动了一个 web 服务器，可以方便地从服务器上打开这个 index.html 了 

1、安装指令：cnpm install -g webpack-dev-server@1.15.0
2、注意：默认访问是 index.html 页面
3、执行命令：webpack-dev-server --open，然后它会自动跳转到：
http://localhost:8080/webpack-dev-server/
4、完毕，会显示html页面内容

图片.png

webpack-dev-server（npm）

1、先打包
2、运行命令查看json文件：npm init -y
3、修改json文件，加入内容：
"scripts": {
    "dev": "webpack-dev-server --open"
  }
4、运行看效果：npm run dev
5、访问页面：http://localhost:8080/

图片.png