0、什么是webpack ?
简单来说就是一个工具。是一个前端开发人员用来打包、压缩、测试的工具。webpack是基于node的npm里面的。

npm是什么？
n 是node
p 是page 包
m 是manager管理器

npm 和webpack 是什么关系？
还记得吗，npm install 的时候，工程里多了这么个玩意 node_modules，里面有自己下载的依赖或其它的包。无数个npm包中的一个是就是一个 webpack。
webpack封装了node的方法，有时候你使用就一个字 “爽”。

1、webpack只认识js,如果有css、style那么需要下载 loader（转化器）转成js供webpack识别。此外，可以通过webpack命令下载，也可以在webpack.config.js配置上补上。
2、可以在终端上玩：例如输入 webpack -p

webpack命令使用和自定义.png

3、可能在终端上不怎么使用，那么实际开发中，我们通常是在webpack.config.js中配置的。

webpack配置.png

注：

entry 是入口，
output 是输出（编译过后输出的文件名，可以自己自定义）
devtool 是可以定义然开发者可以在浏览器查看webpack编译更新的后的文件。
devServer 是热更新，如果是当个需要每次都到终端运行 webpack-dev-server --port 2432 开启一个端口。还不如这样配置到配置文件里来的方面。
module 是模块，例如loaders是转化器，webpack是不认识css的需要配置loader,写正则匹配/.css/$$ ,匹配.css 文件，‘$’ 是表示结束。(排版只有一个美元符哈)

还记得 npm run dev 这个每次都跑起项目的终端相信你们都非常熟悉了吧。我们也可以配置的。

npm run dev.png

注：

我们可以在 scripts里，修改dev 和对应的key值 webpack-dev-server ，就可以轻松的实现， npm run dev 的操作了。其实就是使用webpack跑起一个项目服务而已。

PS：这个平台挺坑，例如：连 github 开源项目的链接都过滤掉了，不是很想待在这个平台了。未来会转到其它平台或者自己搭建个博客，推荐 gitbook、掘金上写，你懂的。