webpack 从入门到工程实践

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

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 最强势的地方在哪里?
已有805人预订
预订达标
文章出炉
交流日期
     
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.这是为什么?
你可能还喜欢
支付平台架构设计评审核心要点与最佳实践
李艳鹏
软件架构发展历程分享
kimmking
死磕 Elasticsearch 方法论:普通程序员高效精进的 10 大狠招!
铭毅天下
前端大师炼成记:初中级前端成长指南
差不多先生
微服务开发中的数据构架设计
陈伟荣
从微信支付宝支付接口设计谈 API 接口产品的设计经验和最佳实践
李艳鹏
微信扫描登录