学习过webpack基础配置的童鞋都能快速写出一套基础的配置方案，我本人属于用起来还行，但是具体说说他们的原理和差异就有点张不开嘴，趁着现在重新着手一个新项目，把这些好好捋一捋！！！
1. webpack/webpack-cli
webpack是代码打包工具，可以分析js代码里面各种引入的依赖关系。
webpack-cli是用于运行webpack的命令工具包。
对于一个纯净的项目，其中入口文件代码如下：
import { join } from "lodash"function component() { const element = document.createElement('div'); // Lodash, currently included via a script, is required for this line to work element.innerHTML = join(['Hello', 'webpack'], ' '); return element;}document.body.appendChild(component());
如果引入webpack，直接在命令行工具中运行【不需要任何配置文件】：
npm init -y
npm install --save-dev webpack webpack-cli
npx webpack
会自动生成一个dist文件夹，默认 入口文件是src/index.js， 默认打包后文件是dist/main.js，此时需要在index.html中手动引入dist/main.js。
其生成的文件默认是production模式！
如果想要查看生成的代码，可以使用development模式：
npx webpack --mode=development
其中import是ES2015的语法，某些低版本的浏览器即使不支持import/export这个新语法，但是webpack支持它，并会将其处理成老版本浏览器也支持的形式。
另外，webpack除了import/export 的ES2015新语法之外，不支持任何其他的ES2015语法，如果需要处理其他语法，需要引入其他处理如babel-loader等！
2. 按需加载
如上的代码中引入import时，虽然是通过解构方式引入，但是打包后的文件还是包含整个lodash文件。不会自动进行按需加载！！
要想实现按需加载，有两种方式：
-
1. 手动按需加载
import join from "lodash/join";
-
2. 使用Tree Shaking
Tree shaking是一个在js中去除未使用代码的术语。它本身依赖于ES2015的语法import/export。上面的代码未进行按需加载，说明使用的不是ES6的导出形式。
查看node_modules可知，其导出形式为module.exports = xxxx
那么我们应该换一个lodash导出形式为export的库。
首先，将无用的库删除
npm uninstall lodash
其次，查找lodash相关库，发现有lodash-es。
根据其提示需要安装lodash-es(V4.17,21),不需要任何其他额外操作:
npm install lodash-es
然后，修改代码引入：
import {join} from "lodash-es";
3. 配置文件webpack.config.js
当项目稍微复杂点时，需要引入配置文件。简化操作。
