Webpack的安装

Webpack需要在node环境下，才能正常运行。所以必须安装node.js.node.js自带了一个包管理工具npm.(node package manage)，因为node依赖很多包，所以它自带了npm来管理这些包。
所以安装Webpack的步骤：

安装node.js
通过npm全局安装webpacknpm install webpack@3.6.0 -g（3.6.0是Webpack版本号，-g是-global，意思是全局安装）

Webpack的简单使用

一般工作中，会存在两个比较重要的文件夹

src 这是存放源码的地方
dist 这是将我们的源码打包之后，放置的地方。后续我们只需要将这个dist文件夹放在服务器中即可。

通常情况下，我们把src中的源码进行打包，然后放在dist文件夹中，最后将index.html也放入dist文件夹中，最后将dist文件夹放到服务器即可。我们把src进行打包的时候，往往只需要打包入口js：main.js即可。因为webpack会自动帮你处理好模块之间的依赖。所以其他有关联的模块也会被打包。最后打包形成一个包，也就是bundle.js。最后index.html引入这个bundle.js即可。这里举个例子：我的文件结构： es6Module.js:

export  function decrement(a,b)
{
    console.log(a-b);
};

main.js:

 import {decrement} from "./es6Module"

let a = 11;
let b = 12;
 decrement(a,b);

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="./dist/bundle.js"></script>
</html>

如果搁以前，我们肯定是直接在index.html中引入main.js和es6Module.js，但是这是不行的。因为不是所有浏览器都能支持es6的模块化规范，根本解析不了他们。所以这个地方我们直接打包main.js，由于main.js和es6Module.js之间有输入输出的关系，所以我们也会把es6Module.js也打包过去，最后打包成一个包：bundle.js。最后在index.html引入bundle.js即可。

打包的方法

首先我们应该跳转到src文件夹下,打包main.js。所以是 ** webpack 要打包的文件（相对路径）打包后的路径**

注意事项

虽然webpack支持你使用各种各样的模块化规范，但是不要混用。比如说es6，commonJS的输出在同一个文件中使用是会报错的。

Webpack--Webpack的安装及基本使用

Webpack的安装

Webpack的简单使用

打包的方法

注意事项