webpack详解（1）

一、什么是webpack

    |--官网：https://webpack.js.org/
    |--官网截图：

bundle your assets捆绑你的资产

bundle your scripts捆绑你的脚本（js）

bundle your images捆绑你的图片

bundle your styples 捆绑你的样式

    |--官网解释的可以总结为：
        |--打包你的资源，包括js、css、image。
    |--那么到底webpack是干什么的？
        |--其实就是一个模块打包器。

二、为什么用webpack

    |--不使用webpack的场景：以前开发时，一个html可能引用十几个js文件，而且顺序还不能乱，因为他们之间可能存在某种依赖关系，与此同时随着ES6的广泛应用，一些新的语法，less，sass等，css预处理器不能的很好的解决，此时就出现了webpack这个工具，解决上述的问题。
    |--如何解决上述问题：webpack把你的项目当成一个整体，通过一个入口主文件，例如：index.js。从这个文件开始找到你的项目所有依赖文件并处理他们。最后打包成一个（或多个）浏览器可以识别的javascript文件。

三、webpack的准备工作

    |--1.创建一个webpack-project文件夹，并进入文件夹下，使用npm init初始化一个package.json。
    |--注意：如果想跳过如图第二部分（不想发布这个模块）的一大堆询问，直接npm init -y。

创建package.json文件

package.json文件内容

    |--2.安装webpack和webpack-cli，webpack模块把一部分功能分到了webpack-cli，所以都要安装。
        |--npm install webpack -global：全局安装webpack命令
        |--简写：npm i webpack -g
        |--npm install webpack-cli --sava-dev：安装本地项目模块，--sava-dev用于把配置添加到package.json的
        开发环境配置列表中。
        |--简写：npm i webpack-cli -D
        |--npm install webpack --save：不添加到package.json配置列表中。
        |--简写：npm i webpack -S
        |--注意：如果npm下载比较慢，可以使用淘宝的cnpm的镜像，安装cnpm：
            npm install -g cnpm --registry=https://registry.npm.taobao.org
        |--使用cnpm命令代替npm

安装cnpm

       |--安装webpack：

查询版本，进行重新安装

更新到最新版本

    |--安装webpack-cli，先使用--sava/-S方式：

安装webpack-cli

package.json文件

项目目录

使用-D方式重新安装webpack-cli

package.json

（为什么多出来一个devDependencies？后面就会知道，先不用考虑！）
    |--3.在项目目录新建两个文件夹src和dist，和三个文件
        |--dist文件夹：
            |--index.html
        |--src文件夹：
            |--hello.js
            |--index.js
        |--如图：

创建src和dist

    |--准备工作完毕，现在让我们开始学习使用webpack，是如何进行打包的！

四、webpack打包（简单）

    |--第一步：我们在dist/index.html文件下，引入我们一会打包之后的js文件。

index.html

    |--第二步：我们在hello.js中导出一个模块。

导出一个function

    |--第三步：在index.js把hello这个模块引入。

引入hello模块

    |--上述操作的意义：首先我们把hello模块合并到index模块，index.js作为一个入口文件，我们通过webpack
    打包这个index.js，最后生成一个bundle.js文件，在index.html页面引入打包后的文件。会出现什么效果？
    如果我们把多个模块，在index.js中引入，然后对其打包，最后在页面只引入打包后的bundle.js，是不是很
    给力呢？往下看
    |--第四步：通过webpack开始进行打包。

同时编译了index.js和hello.js文件

打包成功，打包后文件内容

访问index.html ，hello模块内容已经被渲染到页面