十五:开发模式与webpack-dev-server

为什么需要开发模式?

借助webpack,在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能,而source-map更是准确定位代码错误的利器。

十六:开发模式和生产模式·实战

这是webpack4系列最后一篇教程了。这篇文章在之前所有教程的基础上,做了一个真正意义上的 webpack 项目!我花费了三个月整理了这份教程,并且完善了相关示例代码,也更熟悉 webpack 的理论和应用,当然,也感谢大家的支持。

好了,感慨完毕,开始正题 ?

十四:Clean Plugin and Watch Mode

简单来说:生产开发过程中优雅地自动化!!!

在实际开发中,由于需求变化,会经常改动代码,然后用 webpack 进行打包发布。由于改动过多,我们/dist/目录中会有很多版本的代码堆积在一起,乱七八糟。

为了让打包目录更简洁,需要Clean Plugin,在每次打包前,自动清理/dist/目录下的文件。

除此之外,借助 webpack 命令本身的命令参数–Watch Mode:监察你的所有文件,任一文件有所变动,立刻重新自动打包。

十三:自动生成HTML文件

在真实生产环境中,运行webpack进行打包后,完整的index.html应该是被自动生成的。例如静态资源、js 脚本都被自动插入了。而不是像之前的教程那样根据生成的文件手动插入。

为了实现这个功能,需要借助HtmlWebpackPlugin根据指定的index.html模板生成对应的 html 文件,还需要配合html-loader处理 html 文件中的标签和属性。

十一:字体文件处理

在自己的项目中引入中意的字体样式,是让自己舒坦的重要方式 :)

源码地址如下:

十二:处理第三方JavaScript库

项目做大之后,开发者会更多专注在业务逻辑上,其他方面则尽力使用第三方JS库来实现。

由于js变化实在太快,所以出现了多种引入和管理第三方库的方法,常用的有 3 中:

  1. CDN:标签引入即可
  2. npm 包管理: 目前最常用和最推荐的方法
  3. 本地js文件:一些库由于历史原因,没有提供es6版本,需要手动下载,放入项目目录中,再手动引入。

本文详细介绍了:在上面 3 种方法的基础上,如何配合webpack更优雅地引入和使用第三方js库。

十:图片处理汇总

本节课会讲述webpack4中的图片常用的基础操作:

  • 图片处理 和 Base64编码
  • 图片压缩
  • 合成雪碧图

九:CSS-Tree-Shaking

CSS 也有 Tree Shaking?

是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。

通常来说,造成学习和理解难度的原因,无非是无法模拟较真的生产环境来进行演练 (比如:在 js、html 等文件中使用 css 样式)。

但是,本篇博文已经帮您准备好了。快来看看吧!

八:JS Tree Shaking

本文简述了webpack3webpack4在 JS Tree Shaking 上的区别,并详细介绍了在 webpack4 环境下如何对 JS 代码 和 第三方库 进行 Tree Shaking。

Now, 一起来踩坑吧 ♪(^∇^*)

七:SCSS提取和懒加载

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4v3在 Scss 的懒加载上的处理方法有着巨大差别:

  • 入口文件需要引用相关 LOADER 的 css 文件
  • 配置需要安装针对v4版本的extract-text-webpack-plugin
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×