什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Grunt和Gulp的工作流程
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
Webpack工作方式
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。
nodejs环境安装好之后，
（淘宝npm cmd命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org）
·安装webpack和webpack-cli
cnpm install –save-dev webpack
cnpm install –save-dev webpack-cli
-------------------------------------------------------------------------------------
这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。
开发环境and生产环境：
开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。
-------------------------------------------------------------------------------------------
·项目示例
1、切换到项目目录：
直接进入d盘 ： d:
cd D:\Program Files\nodejs\node_global\node_modules\webpack\jqueryDemo
2、手动打包,将入口main.js文件为public中的bundle.js ： webpack app/main.js -o public/bundle.js
3、通过配置文件进行打包
cnpm start
cnpm run dev
·错误记录：
【1】WARNING in configuration
The 'mode' option has not been set, webpack will
is value. Set 'mode' option to 'development' or
for each environment.
You can also set it to 'none' to disable any def
://webpack.js.org/concepts/mode/
ERROR in multi ./app/main.js public/bundle.js
Module not found: Error: Can't resolve 'public/b
odejs\node_global\node_modules\webpack\jqueryDem
@ multi ./app/main.js public/bundle.js main[1]
·错误原因：没有设置webpack的模式，是生产还是开发（production or development）
·解决办法：执行命令：webpack --mode=production或者webpack --mode=development
【2】
·ERROR in Entry module not found: Error: Can't resolve ' es\nodejs\node_global\node_modules\webpack\j
·错误原因：当前的webpack版本是最新的，原先的这个命令（webpack app/main.js public/bundle.js ）用不了，需更新。
·解决办法：，命令更新为：webpack app/main.js -o public/bundle.js
【3】
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
处理方法：
将项目里的“node_modules”文件夹删除，然后在cmd中cd到项目目录，依次运行命令：npm install和npm run build，最后运行npm run dev后项目成功运行。
【4】
npm ERR! missing script: build
【5】
清理cache的命令：
npm cache verify
备注：
·cmd命令 【https://www.cnblogs.com/accumulater/p/7110811.html】
( 几个简单的cmd命令如“ipconfig /all”、“d:”、“dir”，这里多介绍一个电脑自动关机的方法，输入命令“shutdown -s -t 3600”就代表3600秒后关机，也就是一个小时后电脑自动关机哦。 )
·linux命令 【http://www.cnblogs.com/yjd_hycf_space/p/7730690.html】
===
npm package.json属性详解
【https://www.cnblogs.com/tzyy/p/5193811.html】
===
========
npm webpack的命令需要和版本保持一致，否则不生效
========
=============
·webpack-dev-server 是基于node.js Express服务，它同时包含了一个基于 Socket.IO 轻量的运行时环境。
引用 webpack 和 webpack-dev-server 模块，通过WebpackDevServer启动服务，通过 HotModuleReplacementPlugin 插件启动代码自动编译页面自动刷新。这样，当你修改了html、js或者样式文件，页面会自动编译刷新。
【https://www.cnblogs.com/penghuwan/p/6941616.html】
==================
----------------------------------------------------------
总结：【https://www.jianshu.com/p/397df5dfd09c】
1.webpack在全局安装， webpack-dev-server死活不兼容，根本跑不起来（说版本太低了，但是这怎么解决依旧没有找到解决方案，有待解决）
结论：webpack还是局部安装吧！
2.webpack在局部安装，假设package.json 里面的name为：webpack，那很好又报错了
将package.json 的name属性修改为：webpackTest, 通过！
结论：package.json的name属性不能跟webpack命令一样
3.解决问题2后，输入命令webpack，提示webpack command is not found
基于这情况，在package.json下，配置一下命令：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
在终端下，执行npm start，开始编译，生成build文件夹
继续配置webpack-dev-server，package.json入面的配置就不是像教程那样写了，应该为这样
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"dev": "webpack-dev-server --hot --inline"
}
在终端下，执行npm run dev，通过！！！！ 在浏览器里输入localhost:8080, HelloWorld出现了！！！！！！
·Windows中目录及文件路径太长无法删除的解决方法
【https://www.npmjs.com/package/windows-node-deps-deleter#readme】
导致目录太深的原因就是用node中的node_modules引起的, 所以以毒攻毒, 用node解决
npm install -g windows-node-deps-deleter
wnddel dir1 <dir2 <... <dirN>>>
============================================================================================================================================================
【https://segmentfault.com/a/1190000012744818】
【https://webpack.docschina.org/configuration】
webpack.config.js的四个核心概念
示例：
var path = require('path'); #使用Node内置的path模块，并在它前面加上__dirname这个全局变量。可以防止
不同操作系统之间的文件路径问题，并且可以使用相对路径按照预期工作。
var webpackConfig = {
devtool:'inline-source-map', //开发错误提示，嵌入到源文件
entry:{ }, //string | object | array ;这里应用程序开始执行；webpack开始打包
output:{ }, //webpack 如何输出结果的相关选项
devServer:{ }, //开发服务器配置，
module:{ //关于模块配置
rules:[] //模块规则（配置loader、解析器等选项）
},
plugins:plugins, //附加插件列表
}
module.exports = webpackConfig;
【参考文章】
【https://www.jianshu.com/p/42e11515c10f】-> 【https://www.cnblogs.com/xfshen/p/5942585.html】---推荐
官方API【https://www.webpackjs.com/concepts/】
【https://www.cnblogs.com/wymbk/p/6172208.html】
【https://segmentfault.com/a/1190000006178770】
【https://blog.csdn.net/henery_002/article/details/78016575】