vue-cli2 脚手架内配置

Z时代
2024-01-10
分类：综合

vue

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');
        }
      }
    }