Webpack 从入门到工程实践

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

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

  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 最强势的地方在哪里?
已有1141人预订
预订达标
文章出炉
交流日期
     
17.08.15
17.08.29
17.09.05 20:30
查看文章评论/提问
陈事已超然
有用,超级有用!
四月💕
问题:对于chunkfile不是很理解,可以解释一下吗,为什么称之为不具备独立依赖的文件
unclexiao
题主循序渐进地分析了webpack的使用场景,并整理了思维导图。但能否对比一下跟之前的构建工具如gulp、fis做个简单对比? 之后有rollup.js来优化,并且webpack3也加入了`shaking tree`特性,那么题主能介绍一下它的工作原理呢?
冰尘
我们的一个项目上不了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.这是为什么?
你可能还喜欢
如何设计一个灵活的 MySQL 数据表,应对灵活多变的需求
李岩
Jenkins 自动化构建部署实战
火币集团研发中心
Java 程序员应掌握的 Nginx 实战应用
JPM
带你玩转 JSON
能量架构师
Python Pandas 做数据分析之玩转 Excel 报表分析
WinterLeo
小程序从入门到进阶
loonglong
微信扫描登录