摘要：当下最流行的模块打包器于年月日正式发布版本，代号。从官方的发布日志来看本次大版本更新带来了很多新特性更新和改善，这将会让的配置更加简单。本文，笔者将会全面介绍的新特性及实践。只支持模块，目前处于试验阶段。
导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins，它可以改变、压缩和优化各种各样的文件。它的输入是不同的资源，比如：js、css、图片、字体和html文件等等，然后将它们输出成浏览器可以正常解析的文件。
当下最流行的模块打包器 webpack 于2018年2月25日正式发布v4.0.0版本，代号legato。从官方的 发布日志 来看, 本次大版本更新带来了很多新特性更新和改善，这将会让webpack的配置更加简单。本文，笔者将会全面介绍webpack4的新特性及实践。
环境支持在发布日志里的 Big changes 板块，官方宣布不在支持Node 4, Node 6 使用的是v8 5.0版本，支持93%的ES6语法。不难看出，这个决定是为了更好的利用ES6语法的优势，来编写出更加整洁和健壮的代码。
备注：当使用webpack4时，确保使用 Node.js的版本 >= 8.9.4。因为webpack4使用了很多JS新的语法，它们在新版本的 v8 里经过了优化。mode 属性
另一个大的改变是webpack需要设置mode属性，可以是 development 或 production。
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
通过mode, 你可以轻松设置打包环境。如果你将 mode 设置成 development，你将获得最好的开发阶段体验。这得益于webpack针对开发模式提供的特性：
浏览器调试工具
注释、开发阶段的详细错误日志和提示
快速和优化的增量构建机制
如果你将mode设置成了 production, webpack将会专注项目的部署，包括以下特性：
开启所有的优化代码
更小的bundle大小
去除掉只在开发阶段运行的代码
Scope hoisting和Tree-shaking
插件和优化webpack4删除了CommonsChunkPlugin插件，它使用内置API optimization.splitChunks 和 optimization.runtimeChunk ，这意味着webpack会默认为你生成共享的代码块。其它插件变化如下:
NoEmitOnErrorsPlugin 废弃，使用optimization.noEmitOnErrors替代，在生产环境中默认开启该插件。
ModuleConcatenationPlugin 废弃，使用optimization.concatenateModules替代，在生产环境默认开启该插件。
NamedModulesPlugin 废弃，使用optimization.namedModules替代，在生产环境默认开启。
uglifyjs-webpack-plugin升级到了v1.0版本, 默认开启缓存和并行功能。
开箱即用WebAssemblyWebAssembly(wasm)会带来运行时性能的大幅度提升，由于在社区的热度，webpack4对它做了开箱即用的支持。你可以直接对本地的wasm模块进行import或者export操作，也可以通过编写loaders来直接import C++、C或者Rust。
支持多种模块类型webpack4支持5种模块类型：
javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。
javascript/esm: 只支持ESM这种静态模块。
javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
json: 只支持JSON数据，可以通过require和import来使用。
webassembly/experimental: 只支持wasm模块，目前处于试验阶段。
0CJS0CJS的含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。为了做到0配置，webpack4不再强制需要 webpack.config.js 作为打包的入口配置文件了，它默认的入口为"./src/"和默认出口"./dist"，这无疑对小项目而言是福音。
你所需要做的是在你的项目里包含 ./src/index.js 文件。当在命令行里执行 webpack 命令时，webpack会将该文件作为项目的入口文件进行打包配置。
新的插件系统webpack4对插件系统进行了不少修改，提供了针对插件和钩子的新API。变化如下：
所有的hook由 hooks 对象统一管理，它将所有的hook作为可扩展的类属性。
当添加插件时，必须提供一个插件名称。
开发插件时，可以选择sync/callback/promise作为插件类型。
可以通过this.hooks = { myHook: new SyncHook(...) } 来注册hook了。
更多关于新插件的工作原理可以参考: 新的插件系统是如何工作的？
Webpack5展望已经有不少关于webpack5的计划正在进行中了，包括以下：
对WebAssembly的支持更加稳定
支持开发者自定义模块类型
去除ExtractTextWebpackPlugig插件，支持开箱即用的CSS模块类型
支持Html模块类型
持久化缓存
最后腾讯IVWEB团队的工程化解决方案feflow已经开源：Github主页：https://github.com/feflow/feflow
如果对您的团队或者项目有帮助，请给个Star支持一下哈～
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93672.html
摘要：介绍背景最近和部门老大，一起在研究团队前端新手村的建设，目的在于帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介绍 1. 背景 最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设...
摘要：今天就尝试着一起来聊聊吧，旨在帮大家加深理解新手更容易上路，都能从到搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解中的每一个配置字段的作用部分为新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言 经常会有群友问起webpack、react、redux、甚至cre...
摘要：静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐丰满会更加显著。选择，会生成符合规范的文件，使用，会生成满足规范的文件，使用会生成使用的的代码。使用或者是会生产包含特性的代码。 showImg(https://segmentfault.com/img/bVbbhsr?w=800&h=800); 静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐...
摘要：前段时间又发布了新版本我接触的时候已经版本了支持的版本必须打包速度大小比较以及粗浅的试了一下下图所示，黄色为版本绿色为我写的配置，跟基本相似，具体不同下面会介绍蓝色是自带的模式红色为具体大小速度大家可以比较一下，还是很给力的关于配置方面，应 前段时间webpack又发布了新版本webpack4我接触的时候已经4.1版本了node支持的版本必须node: >=6.11.5 webpack...
阅读 3454·2021-11-18 10:07
阅读 1531·2021-11-04 16:08
阅读 1455·2021-11-02 14:43
阅读 1054·2021-10-09 09:59
阅读 784·2021-09-08 10:43
阅读 992·2021-09-07 09:59
阅读 915·2019-12-27 11:56
阅读 889·2019-08-30 15:56
