webpack V4+ 终极小白十万个为什么！

webpack 作为前端的代码整合，模块打包工具，使用频率非常之高！之前只用到npm run dev ,npm run build
但没有参透其中的逻辑和道理，以至于优化编译的时候就是一脸懵，只能悻悻的等着大佬们去解决问题。

在百度了“wepback入门*”文章之后。。。发现，并不是终极小白可以看的懂的，或者说看起来还是很费劲。因为中间省去了很多npm 模块和创建基础的文件过程。

因此！我还是自己再写份总结出来比较靠谱。。。

webpack 学习前提：
node，npm 已躺在你的环境里 安装步骤不在这里赘述了（诶？我也有不想写详细的地方。。毕竟这个基础可以写到node终极小白里=。=！）

接下来：

1. 全局安装 webpack   

npm install -g webpack

2. 创建一个空文件夹 命名 webpackTest 

npm init

初始化一个node项目里面包含package.json （只有包含package.json文件才能安装node_modules）

3. 安装到项目目录

npm install webpack --save-dev (cnpm 也可以）                    

4. 安装 webpack-cli

  * 百度得知：webpack4，全局安装cli之前webpack寻找不到webpack命令,webpack 和webpack-cli 分开管理

    npm install -g webpack-cli

官方文档中推荐本地安装并且提示，当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

把webpack-cli全局安装卸载掉，然后进入路径node_modules/.bin/webpack就可以执行了，如下：

这就意味着如果你webpack和webpack-cli是局部安装的，想要使用webpack命令必须进入node_modules/.bin/webpack才能执行webpack命令，.bin目录包含的是一系列可以执行的命令，但是如果你是全局安装的webpack-cli，就不需要进入bin目录，webpack就能够寻找到它的命令路径了

5. 浏览器监听代码修改

npm install --save-dev webpack-dev-server

"server": "webpack-dev-server --open"

     "server": "webpack-dev-server --open"

6. Loaders

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置

题外话： path.join & path.resolve

path.join('/a', '/b')

path.resolve('/a', '/b')

path.resolve([from...], to) // 返回相对当前目录的绝对路径

from 源路径

to 将被解析到绝对路径的字符串