webpack 从入门到工程实践

作者/分享人:zhangwang
启德规划院前端负责人,技术爱好者。

webpack 也许可以算作是目前前端开发离不开的工具了。参与本话题,我们可以花最短的时间理解,掌握,并依据自己的工程需求拓展使用这款工具(基于最新版3.5.4)。本话题将包含以下内容:

  1. 从 0 构建属于自己的 webpack 基础配置文件,此部分你将理解 webpack 涉及到的常用概念,明白 webpack 的使用规则。
  2. 对 webpack 的常用 loader,Plugins 做系统的分类阐述,此部分将帮你知晓 webpack 能做什么,不能做什么。
  3. 分享一个依据 webpack 官方文档制作的思维导图,此部分将帮你拥有更体系化的 webpack 知识图谱。
  4. webpack 填坑说明:鉴于网上大多 webpack 教程基于 webpack1.x,本话题还将稍稍讨论二者的区别,帮助你平稳迁移。
  5. 分析一个中型项目中,开发环境和生产环境的对应的 webpack 配置文件,此部分将助你在实际项目中选择较合适的配置。

实录提要:

  • 如何搭建一个离线版的 webpack 和 reactjs 的开发环境?
  • 如何正确的使用 eslint 工作流?
  • 用 webpack 的话是不是生产环境也必须装一套 node?
  • webpack 如何实现多种环境使用?
  • create-react-app 中 build 之后,要想双击打开打包以后的 index.html 文件,eject 之后怎么配置 webpack ?
  • vue 开发,生成的 0.chunk.js 是什么?入口文件包含这些 chunk 文件内容吗?
  • 搭建几个网页的网站用 webpack 值得吗?
  • webpack 开发环境配置和生产环境配置,这两者需要分别单独配置或者需要更多的细微化配置吗?
  • webpack3 最强势的地方在哪里?
已有682人预订
预订达标
文章出炉
交流日期
     
08月15日
08月29日
09月05日 20:30
查看文章评论/提问
陈事已超然
有用,超级有用!
unclexiao
题主循序渐进地分析了webpack的使用场景,并整理了思维导图。但能否对比一下跟之前的构建工具如gulp、fis做个简单对比? 之后有rollup.js来优化,并且webpack3也加入了`shaking tree`特性,那么题主能介绍一下它的工作原理呢?
四月💕
问题:对于chunkfile不是很理解,可以解释一下吗,为什么称之为不具备独立依赖的文件
冰尘
我们的一个项目上不了internet,请问如何搭建一个离线版的webpack和reactjs 的开发环境?谢谢
kris陈大文: 使用create-react-app
冰尘: 谢谢你 但是如何离线安装让其支持 create-react-app呢?
Nemo: 局域网搭一个cdn
leego
请教作者一个问题,还望解答。在rules里面,有两个rule。这两个rule的text都含有某种类型后缀(比如.png), 此时,webpack会如何去处理?是只匹配一个rule,然后用loader处理就好了,还是两个rule的loader都要处理。
leego: 写错了,是test属性
zhangwang: 不做特殊设置的话是都会处理的
leego: @zhangwang 好的,感谢。
感谢分享
hello斌
webpack刚入门到放弃,反复看,反复实践
o.o
请问怎么才能在电脑上看这篇文章啊,微信上看起不习惯
1: 转发到pc上。
z
好清晰,很容易明白!
Luke.js
请问能否讲下webpack1升级到webpack2有哪些改动事项或者注意事项?
Luke.js
include和excluede的书写有没有顺序?
四月💕
问题:前提我们工程目前用的是react,于是为了避免用webpack打出的包太大,使用了externals!有一个疑问:使用externals的确文件不会被打进包,但是需要用script标签在html中引入该文件是吗?
我是你的石头城
vue开发,生成的0.chunk.js是什么?入口文件包含这些chunk文件内容吗?
Ziksang
webpack3最强势的地方在哪里
无类
标记
超级奥005
怎么关注或者收藏
🏃
ERROR in myEntry.js from UglifyJs Unexpected token: name (urlParts) [myEntry.js:325,4],请问这个问题是什么原因,一下午没解决
im天忱
用webpack3编译jsx语法的js文件,但是一直提示You may need an appropriate loader to handle this file type.这是为什么?
你可能还喜欢
Service Mesh 在华为公有云的实践
田晓亮
从零开始,搭建 AI 音箱 Alexa 语音服务
Mike
Web 安全恩仇录:再谈逻辑漏洞
肖志华
如何用 Vue 实现前端权限控制(路由权限 + 视图权限 + 请求权限)
雅X共赏
智能增长:如何用大数据和人工智能实现业务体量的增长
蒋凡
有关 Mock 的是是非非
思考的犀牛
微信扫描登录