什么叫webpack：
webpack 是一个模块打包工具,起初它只能打包js文件，发展到现在可以打包任何文件。
// ES module 导入一个模块
import Header from './header.js'
// 导出一个模块
export default function header(){}
之前，在一个js文件中 引入别的js文件，是无法执行的，浏览器无法识别！此时webpack登场了，webpack它可以识别模块导入的方式 ，它可以帮浏览器做一个翻译：
安装webpack
1、进入项目目录，初始化： npm init （前提需安装node） ，一路回车，
此时，项目文件夹中会多出一个 package.json 文件 ，它是一个默认的项目配置文件。
2、安装webpack及webpack-cli 脚手架，这块说下，最好把webpack和webpack-cli安装在项目中，避免安装在全局，原因如果有一个项目是webpack3.xxx的配置，另一个项目是webpack4.xxx的配置，此时你全局安装webpack，其中一个项目webpack配置就会有问题，而安装在项目中就不会存在此问题！
npm install webpack webpack-cli --save-dev === npm install webpack webpack-cli -D
3、安装完成后，输出webpack -v，结果发现未找到，原因是node它会全局去寻找webpack的安装目录，不必然会找不到，因为我们是在项目中安装的webpack。我们可以通过npx来查找webpack，npx：它会在当前项目的node_modeules中去寻找webpack，所以通过npx webpack -v 即可查看webpack的版本号了。
让webpack帮助我们翻译代码（打包模块），npx webpack xxx.js 用webpack去翻译后边的.js文件，翻译成功后，它会放到dist文件夹下的main.js中去。
此时，项目文件夹下会多出一个dist文件夹，在html中引入dist文件夹下的main.js（被翻译（打包）过的文件） , 打开网页，即可显示出内容！
// html.html
<script src="./dist/main.js"></script>
// web.js
import Header from './header.js'
import Footer from './footer.js'
Header()
Footer()
// header.js
function header(){console.log('this is a header')}
export default header
// footer.js
function footer(){console.log('this is a footer')}
export default footer
在浏览器中，打印结果：
补充：
--save-dev 与--save区别
--save-dev 会把安装的包和版本号记录到package.json中的devDependencies对象中，打包工具或者测试工具用到的包使用--save-dev，存到devDependencies，比如：webpack、eslint；
--save 会把安装的包和版本号记录到dependencies，在浏览器中执行的js用到的包，会存到dependencies，比如JQuery等等。
用处
通常一个项目，传到github上去，一般会在 .gitignore 中指定忽略node_modules目录和里边的文件，这样从github上拉下来的项目，需要运行npm install 来安装node_modules , 而项目所依赖的包会通过package.json 中的dependencies和devDependencies对象中所记录的包的相应版本下载下来。
