为了账号安全,请及时绑定邮箱和手机立即绑定

求问,什么是WebPack,为什么要使用它?

求问,什么是WebPack,为什么要使用它?

Smart猫小萌 2019-11-11 13:09:10
什么是WebPack,为什么要使用它
查看完整描述

4 回答

?
jeck猫

TA贡献1909条经验 获得超7个赞

为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
模块化,让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
Scss,less等CSS预处理器
...
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。
什么是Webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

查看完整回答
反对 回复 2019-11-16
?
Cats萌萌

TA贡献1805条经验 获得超9个赞

可以考虑开发的时候,页面中加载的是源码,然后用livereload实现有修改,自动刷新页面
然后在进行release发布的时候,打包编译,测试看看有没有问题。
这样进行编译的次数就少了。webpack是可以支持requirejs的AMD的写法的吧

查看完整回答
反对 回复 2019-11-16
?
狐的传说

TA贡献1804条经验 获得超3个赞

只是一个别名而已。这里设置别名是为了让后续引用的地方减少路径的复杂度。

//例如
src
- components
- a.vue
- router
- home
- index.vue

index.vue 里,正常引用 A 组件:

import A from '../../components/a.vue'

如果设置了 alias 后。
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}

引用的地方路径就可以这样了

import A from '@/components/a.vue'

这里的 @ 就起到了【resolve('src')】路径的作用。


查看完整回答
反对 回复 2019-11-16
  • 4 回答
  • 0 关注
  • 1122 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信