前言：工作前端也有两年了，对前端也有一定的个人理解。随着自己的岁月增加，而前端的日新月异，感觉脑子越来越不够用了，将来老了会不会老年痴呆啊（极思密恐）！！扯远了，所以还是希望自己手和脑子还灵活的时候，写点东西，相当于是一份记忆吧，哈哈哈哈。
对webpack的学习也是通过一些官网、免费课程的入门、一些其他大牛博客里面进行观看阅读，再自己慢慢理解，然后上手实验的成果。所以遇到很多坑，也有很多不懂得地方，慢慢解决出来的，虽然有时会让你头疼，但是真正实现出来后会发现比敲业务代码还幸福。我自己深知能力有限，有不正确的地方，希望各路大佬多多指出，共同进步。
一、webpack是什么？
经典配图
记得刚接触webpack的时候，看到这张图，心想：这是啥玩意儿。但是真正明白后，会发现此图是这么的简单明了，生动形象。说白了：webpack就是将项目中所有的依赖文件进行打包合并最终生成最优化的页面文件（html、js、css、图片等）。
这是最重要的目的，当然webpack还可以进行其他用途，如构建本地启动项目，这个后面会有涉及。总的来说webpack是强大的。
二、搭建webpack的环境
webpack是基于node的一个工程化构建工具，所以要安装node。
1）创建webpack.json配置文件 npm init
2）安装webpack的依赖
如果电脑没有安装webpack的话需要先安装：npm install webpack -g
3）安装项目的依赖
npm install webpack --save-dev
这样webpack.json/webpack.lock.json配置文件就生成了，这两个也是根据上面命令自动生成的。
webpack.json:
script对象是用来配置运行命令的，主要就两个运行命令（本地运行、打包运行）：
即dev（开发）、pro(打包)
从命令行中可以看出：dev主要比pro多了一些插件的配置:
webapack-dev-server,这些后面插件那一节在整理。
production/development是传递的参数用来区分环境的，这个在配置文件里可以接收到；
--devtool:是webpack打包后对文件代码的处理，其中有两个值。eval和sourcemap；
eval执行后生成的文件打包速度更快并且不会生成map文件，但是就是在开发时报错的行数与源文件的行数不符；
sourcemap:可以多打包生成一个mapjs文件；
--open是打开默认浏览器运行程序。
未完待续~~~~
