05 2022 档案

9.Webpack--resolve以及开发环境
摘要：一、resolve 二、开发环境 阅读全文
posted @ 2022-05-12 19:51 不爱吃小红薯的小橘子 阅读(38) 评论(0) 推荐(0)
8.Webpack--proxy
摘要：配置devServer里面的Proxy。开发阶段这样来解决跨域问题，但是项目发布阶段需要和后端配合解决跨域问题。 阅读全文
posted @ 2022-05-12 18:58 不爱吃小红薯的小橘子 阅读(48) 评论(0) 推荐(0)
7.Webpack--devServer
摘要：一、搭建本地服务器 二、方式一watch 三、方式二：webpack-dev-server 安装： 新的脚本： 要知道的是这个是通过webpack-cli来解析的。 然后npm run serve后再修改内容，就能做到实时更新了。 另外我们会发现build文件里面是空的，这是因为webpack-cl 阅读全文
posted @ 2022-05-11 21:39 不爱吃小红薯的小橘子 阅读(100) 评论(0) 推荐(0)
6.Webpack--Vue
摘要：一、如何在Webpack中使用Vue？ 这里的意思就是说把Vue当做一个模块来使用，那我们就要先安装这个模块： 看一下会发现其实上面的代码不就是普通的js代码吗，我们现在还没有写.vue的代码，按道理也是可以可以正常渲染打包的。 会发现现在打包是没有问题的，但是没有渲染成功，控制台报如下警告： 为什 阅读全文
posted @ 2022-05-11 21:26 不爱吃小红薯的小橘子 阅读(97) 评论(0) 推荐(0)
5.Webpack--bable
摘要：一、Babel的作用 babel和postcss一样，不借助webpack，也可以单独使用。 二、在webpack中使用babel 安装： 配置： 现在再打包，发现还是没有将代码进行转换，这是因为我们没有使用对应的插件。 三、babel的插件 如果需要转换箭头函数，就要使用箭头函数转换相关的插件： 阅读全文
posted @ 2022-05-11 17:24 不爱吃小红薯的小橘子 阅读(77) 评论(0) 推荐(0)
4.Webpack--Plugin
摘要：Loader是用于对特定模块类型进行转换； Plugin可以用于执行更加广泛的任务，如打包优化、资源管理、环境变量注入等。 一、每次打包时自动删除上次打包的文件--CleanWebpackPlugin 首先安装： 使用： 二、帮助生成HTML模板--HtmlWebpackPlugin 安装： 配置: 阅读全文
posted @ 2022-05-10 22:33 不爱吃小红薯的小橘子 阅读(38) 评论(0) 推荐(0)
3.Webpack的loaders（二）
摘要：一、加载图片资源 file-loader（webpack5已弃用） 在项目中使用图片一般有两种方式：①比如想给一个div设置一个背景：background-image：url() ②通过img标签里面的src属性 直接npm run build就可以展示出来，不需要file-loader： url- 阅读全文
posted @ 2022-05-10 21:45 不爱吃小红薯的小橘子 阅读(43) 评论(0) 推荐(0)
2.Webpack的loaders（一）
摘要：一、css-loader 打包会报错： 安装css-loader： 虽然现在安装了css-loader，但是打包还是不会成功，因为我没有告诉webpack这个loader是干啥的，我要告诉webpack加载css文件要 使用哪些loader： 在webpack.config.js中进行如下配置： 现 阅读全文
posted @ 2022-05-10 20:35 不爱吃小红薯的小橘子 阅读(58) 评论(0) 推荐(0)
1.Webpack基本使用
摘要：一、安装webpack webpack-cli webpack-cli用于在命令行执行webpack 之所以可以安装，是因为npm这个仓库里面有webpack webpack-cli。 现在显示全局的webpack就已经安装了 二、不使用webpack时js模块化的代码想运行在浏览器上会遇到的问题 阅读全文
posted @ 2022-05-09 15:59 不爱吃小红薯的小橘子 阅读(53) 评论(0) 推荐(0)