01 webpack4.0学习笔记——介绍
概述
webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。下面一张图能更加形象的描述webpack:
webpack4.0新特性
2018年2月份webpack4.0发布,这跟之前版本的webpack相比,其中的配置及其他操作流程都发生了一定的变化,所以我们在接下来的文章中介绍新版的webpack4.0,所以,首先我们先来看看webpack4.0到底有哪些新特性:
1)环境支持
官方宣布不在支持node 4, node 6 ,支持93%的ES6语法。所以当使用webpack4.0时,确保使用 nodeJS的版本至少大于8.9.4。因为webpack4.0使用了很多JS新的语法,它们在新版本的v8里经过了优化。
2)mode 属性
webpack4.0需要设置mode属性,可以是 development 或 production。
通过mode, 你可以轻松设置打包环境。如果你将 mode 设置成 development,你将获得最好的开发阶段体验。这得益于webpack针对开发模式提供的特性:
1、浏览器调试工具
2、注释、开发阶段的详细错误日志和提示
3、快速和优化的增量构建机制
如果你将mode设置成了 production, webpack将会专注项目的部署,包括以下特性:
1、开启所有的优化代码
2、更小的bundle大小
3、去除掉只在开发阶段运行的代码
4、Scope hoisting和Tree-shaking
3)插件和优化
webpack4.0删除了CommonsChunkPlugin插件,它使用内置API optimization.splitChunks 和 ** optimization.runtimeChunk **,这意味着webpack4.0会默认为你生成共享的代码块。其它插件变化如下:
1、NoEmitOnErrorsPlugin 废弃,使用optimization.noEmitOnErrors替代,在生产环境中默认开启该插件。
2、ModuleConcatenationPlugin 废弃,使用optimization.concatenateModules替代,在生产环境默认开启该插件。
3、NamedModulesPlugin 废弃,使用optimization.namedModules替代,在生产环境默认开启。
4、uglifyjs-webpack-plugin升级到了v1.0版本, 默认开启缓存和并行功能。
4)开箱即用WebAssembly
WebAssembly(wasm)会带来运行时性能的大幅度提升,由于在社区的热度,webpack4.0对它做了开箱即用的支持。你可以直接对本地的wasm模块进行import或者export操作,也可以通过编写loaders来直接import C++、C或者Rust。
5)支持多种模块类型
webpack4.0支持5种模块类型:
1、javascript/auto: 在webpack3里,默认开启对所有模块系统的支持,包括CommonJS、AMD、ESM。
2、javascript/esm: 只支持ESM这种静态模块。
3、javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
4、json: 只支持JSON数据,可以通过require和import来使用。
5、webassembly/experimental: 只支持wasm模块,目前处于试验阶段。
6)0CJS
0CJS的含义是0配置,webpack4.0受Parcel打包工具启发,尽可能的让开发者运行项目的成本变低。为了做到0配置,webpack4.0不再强制需要 webpack.config.js 作为打包的入口配置文件了,它默认的入口为'./src/'和默认出口'./dist',这无疑对小项目而言是福音。
7)新的插件系统
webpack4.0对插件系统进行了不少修改,提供了针对插件和钩子的新API。变化如下:
1、所有的hook由 hooks 对象统一管理,它将所有的hook作为可扩展的类属性。
2、当添加插件时,必须提供一个插件名称。
3、开发插件时,可以选择sync/callback/promise作为插件类型。
4、可以通过this.hooks = { myHook: new SyncHook(...) } 来注册hook了。
总结
本文简单介绍下webpack是什么以及webpack4.0的新特性,这些新特性在接下来的文章中我们会依次介绍,在此处大家有一个映像就可以。通过本文的阅读,大家需要知道的是:webpack是什么东西。文章介绍的比较简单,大家可以查阅其他的资料搞清楚我们接下来介绍的webpack到底是做什么的就可以。