webpack的相关配置,以及使用webpack打包文件时用到的loader以及相关插件的使用

算法刷题

大厂面试还是很注重算法题的,尤其是字节跳动,算法是问的比较多的,关于算法,推荐《LeetCode》和《算法的乐趣》,这两本我也有电子版,字节跳动、阿里、美团等大厂面试题(含答案+解析)、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后,对所以做Java的朋友提几点建议,也是我的个人心得:

  1. 疯狂编程

  2. 学习效果可视化

  3. 写博客

  4. 阅读优秀代码

  5. 心态调整

二. 编写项目入口

1 编写index.html

从零开始打造Todo应用

在这里插入图片描述

2 编写vue根实例

创建src目录. 在src目录下创建main.js作为项目的总入口文件

在main.js中, 完成如下操作

  • 创建vue根实例

  • 挂载App组件

1) 安装vue

执行 npm install vue 安装Vue

在这里插入图片描述

会发现在package.json中多了上图所示的内容

2) 创建Vue根实例

编写main.js

在这里插入图片描述

3) 挂载App组件

Step1 编写App.vue文件

在这里插入图片描述

Step2 挂载到根实例

在main.js中, 完成如下操作

  • 导入App组件对象

  • 挂载到Vue根实例

  • 在这里插入图片描述

Step3 使用App标签渲染

在这里插入图片描述

这里的App相当于在components中定义的组件名

3 引入main.js测试

在这里插入图片描述

三. webpack基本配置

为了让浏览器能够正确的解析, 我们需要使用webpack将我们的源代码进行打包

1 创建webpack配置文件

在根目录下创建webpack配置文件webpack.config.js, 编写最基本的配置

  • entry: 指定打包的入口

  • output: 指定打包的出口, 也就是最终生成的文件

在这里插入图片描述

2 编写webpack脚本

在packpage.json中, 创建一个执行脚本

在这里插入图片描述

这样就可以通过 npm run build 来执行webpack打包了

3 测试

在命令行中执行 npm run build

会发现提示这个错误

在这里插入图片描述

原因是: webpack只能打包js文件. 对于后缀名为vue的文件不能打包. 如何解决呢?

通过vue-loader来打包vue文件

找到vue-loader的官网: https://vue-loader.vuejs.org/zh/guide/#vue-cli

对于最新的vue-loader@15版本, 按照官网的指导, 做如下配置

1 安装vue-loader

执行命令, 安装vue-loader

npm install -D vue-loader vue-template-compiler

在这里插入图片描述

2 安装css-loader

执行 npm install -D css-loader

3 webpack配置

从vue-load@15版本开始, vue-loader需要在webpack中添加一个插件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

解决警告小问题

我们发现在webpack打包时会出现这个警告

在这里插入图片描述

找到webpack.config.js在配置中添加mode

在这里插入图片描述

5 在主页中引入bundle.js

在index.html中引入bundle.js测试, 发现报错

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打包成功!

6 小结

  • webpack本身只能打包js文件, 如果要打包其他文件就需要借助于loader

  • loader其实就是专门用于打包特定文件的处理程序

五. 其他常用loader

一般来说, 一个前端项目除了js文件外, 还有一些常用的文件, 如

图片文件

  • css文件

  • 对于这些文件, webpack都不会打包, 需要我们安装对应的loader帮助webpack打包

1. 打包图片文件

  1. file-loader-----file-loader: 将文件复制到对应的路径, 并返回文件名

i 安装file-loader

npm install -D file-loader

在这里插入图片描述

  • test: 正则表达式–如果需要打包的文件以jpg或者jpeg或者png或者svg结尾时

  • loader: 使用file-loader

ii 测试

在src目录下创建assets目录, 存放静态资源文件(如: images/styles/fonts等)

在这里插入图片描述

在这里插入图片描述

原理: 当遇到jpg结尾的文件时, 使用file-loader将文件copy到dist目录下. 文件名是图片的hash值

如果希望保留原有的文件名, 可以使用占位符(placeholder)配置

在这里插入图片描述

  • [name] : 占位符, 表示使用原文件名

  • [ext] : 占位符, 表示使用原文件扩展名

在这里插入图片描述

2) url-loader----好处是: 直接将小图片打包以base64打包在js中, 减少Http请求的次数, 提高访问效率

i 安装url-loader

执行命令, 安装url-loader

npm install -D url-loader //同时安装file-loader和url-loader

在这里插入图片描述

ii 配置

修改webpack配置, 添加一条规则

在这里插入图片描述

  • test: 正则表达式–如果需要打包的文件以jpg或者jpeg或者png或者svg结尾时

  • loader: 使用url-loader

  • options: 选项

-limit: 当文件小于2048byte时, 以base64打包到js中, 当文件大于2048byte时, 使用file-loader打包

-name: 打包的文件名使用"源文件名.扩展名"方式

ii 测试

复制两张小的svg图片到assets目录下. 并在App.vue中导入

在这里插入图片描述

运行打包命令 npm run build , 在新生成的bundle.js中, 可以看到

在这里插入图片描述

2 打包css文件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3 打包stylus文件

目前, stylus做为node项目普通使用的css预处理器被广泛的应用于vue项目中. 大家会发现大部分的vue

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5

  • 29
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值