webpack4新特征引见

2024年5月20日 264次阅读 来源: cpselvis

导语: 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版本, 默许开启缓存和并行功用。

开箱即用WebAssembly

WebAssembly(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模块，现在处于实验阶段。

0CJS

0CJS的寄义是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支撑一下哈～

    原文作者：cpselvis
    原文地址: https://segmentfault.com/a/1190000013970017
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞