Webpack 官方文档 ： https://www.webpackjs.com/concepts/ （文档中的 指南 选项下有详细的使用教程）
1、 可以将webpack看做是基于node的一个应用（打包代码等功能），按照webpack的语法规则将一些资源加载/打包成js文件。
命令行中错误，根据里面的提醒，里面有对应去哪个网站上看哪里错误就可以了。
2、可以将webpack看做用node开发从来的一款应用程序，webpack解析js程序，继续相应的工作。
3、什么是WebPack，为什么要使用它？ ： https://www.cnblogs.com/-walker/p/6056529.html
4、 webpack 入门教程 ： https://segmentfault.com/a/1190000006178770 或 https://www.jianshu.com/p/90e1049a5677（推荐）
练习代码 ： https://gitee.com/wufei3623/webpack_building_environment.git （wufei3623 的 码云）
5、node是一个js运行环境。基于node的所有应用(如webpack、gulp)，配置应用的js都是给node运行的而不是浏览器运行的。
项目中的js文件是给浏览器运行的，但不是源文件，而是通过加载器编译（相当于翻译）之后的代码给浏览器运行的。
6、webpack.config.js配置文件中出现的代码解读：
a、 var path=require('path') ;
解读： 引入Node.js path 模块提供的一些方法。 http://www.runoob.com/nodejs/nodejs-path-module.html
b、 __dirname
解读：__dirname 总是指向被执行 js 文件的绝对路径。 https://blog.csdn.net/zsensei/article/details/79094714
7、 从vue-cli学webpack配置 ： https://www.jianshu.com/p/535fccf9ccbd
8、vue-cli脚手架中webpack配置基础文件详解 ： https://segmentfault.com/a/1190000014804826
9、如果是多页面的应用，webpack可以设置多个入口点，将每个页面的js分别打包，在页面中引入
10、webpack将每个js文件看成一个模块(与Node.js类似)，在不同的模块下，即使变量名相同，也不会冲突
11、模块之间共享变量需要在模块中进行导入与导出操作 （本质这种导入导出之后只是共享变量的值，因为导入的时候已经重新赋值了，即使变量名一样）
12、在多个文件中import同一个文件，webpack不会多次打包 ： https://segmentfault.com/a/1190000008521430
13、使用webpack快速搭建最简单ES6环境 ： https://blog.csdn.net/panyang01/article/details/69396919 （注意：一定要配置 .babelrc文件，不然es6语法，编译后还是es6语法）
14、（个人猜测）vue-cli中webpack编译时，碰到vue-cli的环境下环境信息的对象，会把这个对象属性 编译成对应的值，代替这个对象属性的写法，放在编译后的代码中（即编译后的代码中不会存在这个对象属性的代码）。如：下面红色部分的代码，webpack在编译时就会把它用具体的环境值替换掉。
export const STAGE_BASE_URL = process.env.NODE_ENV === 'development' ? '/api1/' : 'h5/api1/stage'
开发环境下，编译后代码应该是（export const编译后是什么代码，这里不做探讨）。因为在浏览器中是不存在 process.env.NODE_ENV 这个对象属性的。所以编译后不会存在
export const STAGE_BASE_URL = 'development' === 'development' ? '/api1/' : 'h5/api1/stage'
推论：process对象在全局中都可以使用，但是是在浏览器的控制台中输入 process ，提示 process 是未定义的。表明 process 编译后并不存在，那么应该编译成一个字符串了。
15、webpack学习心得 ： https://www.jianshu.com/p/c12706b61629
16、webpack的代理、抓包：https://blog.csdn.net/a0405221/article/details/85234149 或 https://juejin.im/post/5c6baf776fb9a049f746c335（onProxyReq 请求发送前触发的事件；onProxyRes 请求响应后触发的事件）
为什么使用这个： webpack是没有日志的，代理某个API接口时，如果调用失败（postman上调用目标接口是有效的）。则无法确认代理后请求的目标地址url是不是正确的，很难排除错误原因。
但是 通过 onProxyRes 事件就可以知道，当前 ajax请求有没有触发这个代理请求，如果触发了代理请求，可以知道代理后目标服务器的url和请求参数； 如果没有触发请求这个代理请求，要么是没有匹配到代理的字段，要么是被其他的代理字段先匹配到了，
比如两个匹配字段 "/api" 和 "/apireq"，如果代理的字段是apireq，则会被api这个字段给代理了，触发了 "/api" 的代理事件，但没有触发"/apireq"的代理事件。(亲测 有效)
proxyTable: { '/api1': { target: 'https://test.iconntech.com', changeOrigin: true, pathRewrite: { '^/api1': '/' }, onProxyReq: function(onProxyReq, req, res) { // req和res分别是Express框架封装的Request对象和Response对象 console.log('代理字段', '/api1'); console.log('前端请求url', onProxyReq._headers.origin + req.originalUrl); // 这里的输出是自己配的，仅做参考 console.log('目标请求url1', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + req.url); // 代理配置的target只有host，没有后面的目录 console.log('目标请求url2', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + onProxyReq.path); // 代理配置的target,有二级目录 }, onProxyRes: function(){ console.log('2'); } } }
17、webpack 中 import 导入后面的路径和文件名 和 文件真实的路径文件名 大小必须要一致。
在 window上，大小写不敏感。大小写不一致，一般都不会出错。在linux系统上 大小写敏感，大小写不一致就会报错。代码部署的时候，一般都是在服务端（linux系统）上打包部署的。
webpack安装出现的问题：
1.One CLI for webpack must be installed ：https://blog.csdn.net/gishys/article/details/80567727 或 https://www.cnblogs.com/1rookie/p/9153237.html
或 https://blog.csdn.net/zengibm/article/details/79914144 （推荐）
其它的解决方案可以安装指定的webpack版本（低于4.0.0版本的）
npm install webpack@3.0.0 -g