随笔分类 -  webpack

记录一些webpack的学习过程，这部分写的也比较详细，希望可以帮助想要学习webpackd朋友们
vue打包时配置不同的环境变量(vue-cli4)
摘要：vue打包时配置不同的环境变量(vue-cli4) 以配置测试环境test为例 1、在package.json文件中配置script文件 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", 阅读全文
posted @ 2021-04-26 00:09 Monday1997 阅读(1231) 评论(0) 推荐(0)
Vue项目中解决跨域问题
摘要：背景：由于浏览器的同源政策，在不同协议、域名、端口时进行数据访问将会出现跨域问题 常见的解决方式有以下几种 jsonp跨域 利用script天然的跨域属性进行跨域操作 jquery ajax实现 $.ajax({ url: 'http://www.test.com:8888/getData', ty 阅读全文
posted @ 2020-09-03 18:18 Monday1997 阅读(1539) 评论(0) 推荐(1)
webpack(6) 打包多页应用和sourcemap 使用
摘要：打包多页应用 首先在src下创建两个js文件，index.js和other.js 接着进行配置，利用 配置打包出口的文件名，这是一个变量，执行build之后可以看到dist目录下有两个js文件 此时[name]打包出来的是home.js和other.js因为入口文件给的键就是这两个 接着写一个htm 阅读全文
posted @ 2020-05-06 01:19 Monday1997 阅读(357) 评论(0) 推荐(0)
webpack(5) 文件打包分类
摘要：打包文件分类 我们的文件不能都放在一个文件夹下，所以需要不同的文件夹进行管理 分离图片 分离css文件 此时打包出 的dist文件目录如下 |dist ​ | css ​ | main.css ​ | image ​ | 351651054.png ​ | index.html ​ | index. 阅读全文
posted @ 2020-05-05 23:46 Monday1997 阅读(874) 评论(0) 推荐(0)
webpack（4） 图片加载
摘要：图片处理（file loader） 引用时出现的问题 在js中引入图片并添加到页面 执行 查看之后发现这个图片加载不出来，也就是说图片并没有被打包出来，此处的路径找不到图片 所以我们需要将图片以资源的形式引入进来 注意：若使用require方式引入时引入的是一个对象，需要不同的处理方式（有兴趣的朋友 阅读全文
posted @ 2020-04-29 23:15 Monday1997 阅读(361) 评论(0) 推荐(0)
webpack（3） babel相关
摘要：babel "链接地址" 在index.js中写入js6的语法如 执行 在打包出来的js文件中搜索 会看到如下片段结果 mode状态为development 可以看到箭头函数依旧以箭头函数的方式输出，而没有以es5的方式输出 接下来安装babel loader 在module rules中进行配置 阅读全文
posted @ 2020-04-29 22:22 Monday1997 阅读(265) 评论(0) 推荐(0)
webpack（2）-样式(样式打包提取与分离）
摘要：webpack学习之样式篇 添加样式 index.js修改如下 在添加如下index.css （src/index.css） 安装css loader 和style loader 后在webpack.config.js中做如下配置： 执行 访问路径后可以出现如下图 执行 之后只有html和js文件 阅读全文
posted @ 2020-04-29 01:53 Monday1997 阅读(437) 评论(0) 推荐(0)
webpack（1）——基本配置
摘要：基本配置 安装webpack 先安装webpack 和webpack cli 创建src文件夹并设置index.js文件 index.js中写入 创建webpack.config.js 当前目录如下 配置webpack.config.js文件如下 在Learnwebpack中cmd执行命令 此时生成 阅读全文
posted @ 2020-04-27 01:29 Monday1997 阅读(191) 评论(0) 推荐(0)