随笔分类 - webpack
摘要：目前解决跨域主要的方案有： jsonp（淘汰）corshttp proxy此处介绍的使用devServer解决跨域，其实原理就是http proxy 将所有ajax请求发送给devServer服务器，再由devServer服务器做一次转发，发送给数据接口服务器 由于ajax请求是发送给devServ
阅读全文
摘要：配置webpack的自动打包功能 1.运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具 2.修改package.json->scripts中的dev命令： "scripts":{ "dev":"webpack-dev-server" } 3.
阅读全文
摘要：webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。 babel-loader 告诉webpack我想要对我的js代码进行兼容性编译 具体配置文件可以新建新建.babelrc,
阅读全文
摘要：assets （资产；优点；有用的东西）与static区别 相同点 >assets文件夹和static文件夹在vue-cli生成的项目中，都是用来存放静态资源的。 不同点 > assets目录中的文件会被webpack处理解析为模块依赖，【只支持相对路径形式】。build的时候由Webpack解析为
阅读全文
摘要：webpack性能优化 优化可以从两个方面考虑，一个是优化开发体验，一个是优化输出质量。 优化开发体验 缩小文件搜索范围。涉及到webpack如何处理导入文件，不再赘述，不会的可以自行搜索。由于loader对文件转换操作很耗时，应该尽量减少loader处理的文件，可以使用include命中需要处理的
阅读全文
摘要：webpack运行流程 分为初始化、编译、输出三个阶段. 初始化： 从配置文件和shell文件读取、合并参数； 加载plugin 实例化compiler 编译 从entry发出，针对每个module串行调用对应loader翻译文件内容 找到module依赖的module，递归进行编译处理 输出： 把
阅读全文
摘要：1.css-loader 的作用是处理css中的 @import 和 url 这样的外部资源 2.style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里 loader的原理 loader能把源文件翻译成新的结
阅读全文
