GVKun编程网logo

webpack4新特性介绍（webpack4.0）

20

关于webpack4新特性介绍和webpack4.0的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于vue-cli3.0.x升级到webpack4后有哪些新特性、webpack4.0.0-

关于webpack4新特性介绍和webpack4.0的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于vue-cli 3.0.x升级到webpack4后有哪些新特性、webpack 4.0.0-beta.0版本新特性介绍、Webpack 5 新特性尝鲜、webpack3升级到webpack4遇到问题总结等相关知识的信息别忘了在本站进行查找喔。

本文目录一览：

webpack4新特性介绍（webpack4.0）

webpack4新特性介绍（webpack4.0）

导语: 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支持一下哈～

vue-cli 3.0.x升级到webpack4后有哪些新特性

vue-cli 3.0.x升级到webpack4后有哪些新特性

这次给大家带来vue-cli 3.0.x升级到webpack4后有哪些新特性，vue-cli 3.0.x升级到webpack4后有的注意事项有哪些，下面就是实战案例，一起来看一下。

最近项目正在优化。乘着有时间看了一下 vue-cli3.0.x 使用 。感觉还蛮不错的。 因为之前项目使用的 vue-cli 2 创建的，强行使用 eslint让我们很难受，一些与项目无关的 “build” 和 “config” ，让人看着就有一些不爽 。由于公司环境比较多，需要测试环境的配置。增加了 “”tt”: “node build/tt-build.js”” 。到 3.0.x 应该怎么用？ 带着这些问题来看 3.0.x 感觉就好多了。

1. 官网资料

在学习技术的时候，经常看查看官网的资料。因为那里的资料更新是最快的 。
vue-cli
vue-cli 文档

2. 安装环境

这里犸特头，推荐大家使用 npm install -g @vue/cli ,通过 yarn global add @vue/cli 还需要进行其他设置，还生成一些文件删除几分钟。

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，创建项目(不同于cli2.0的init，create)
vue create my-project
登录后复制

如果 您使用 yarn global add @vue/cli 安装需要 进入 目录 。执行

yarn // 安装项目依赖
cd packages/@vue/cli // 目录
yarn link //添加 link `vue` 执行指命 。
vue create my-project // 创建项目 。
登录后复制

3. 多环境配置

因为公司有 开发环境 ，测试环境，联调环境，线上环境 。减少人为配置，一次配置对原则。所以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 类型的配置，配置不了不少文件。 在 vue-cli 3.0.x 里面支持 “.env” 文件配置 ,我这里增加 “.env.development” ， “.env.production”和“.env.test” 配置 。

1. 基本对应和默认

  development is used by vue-cli-service serve
  production is used by vue-cli-service build
  test is used by vue-cli-service test
登录后复制

2. 指定配置启动

增加其他配置，需要下面指定配置 。

"dev-build": "vue-cli-service build --mode development",
登录后复制

3.”.env “配置文件编写

配置文件内容格式如下 ，

 VUE_APP_*
登录后复制

例如：”.env.production” 内容如下

VUE_APP_MOCK_URL = ''https://xxx.xxx.xxx/restapi/''
登录后复制

4. 调整用环境配置

 console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue配置怎么请求本地的json数据

pandas+dataframe实现行列选择与切片操作

selenium+cookie跳过验证码登录实现步奏详解

立即学习“前端免费学习笔记（深入）”；

以上就是vue-cli 3.0.x升级到webpack4后有哪些新特性的详细内容，更多请关注php中文网其它相关文章！

webpack 4.0.0-beta.0版本新特性介绍

webpack 4.0.0-beta.0版本新特性介绍

近年来前端技术如雨后春笋般蓬勃发展，我们也在这个潮流下不断地学习、成长。前端技术的不断发展，给我们提供了许多的便利。例如：JSX的出现为我们提供了一个清晰、直观的方式来描述组件树，LESS/SASS的出现提高了我们书写css的能力，AMD/Commonjs/ES6 的出现为我们模块化开发提供了便利。然而，我们需要使用其它工具将这些工具转化成原生语言以运行在浏览器上。为了能够更好的将这些不同的资源整合到一起，我们就需要一个打包工具，webpack就是这个需求下的产物。 webpack 可以看做是模块打包机。它做的事情是：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。目前，webpack 总共发布了三个稳定版本。从17年八月底开始，经历了长达五个月的开发周期，webpack 团队通过增加大量新特性、bug修复、问题改善并于近期发布了 webpack 4.0.0 的 beta 版本。如果你对 webpack 感兴趣，下面我们就来学习一下 webpack 4.0.0-beta.0 的新特性。 P.S. 以下所有代码演示代码都是基于 webpack 4.0.0-beta.0。

1、安装webpack v4.0.0-beta.0

如果你使用yarn:

rush:js;"> yarn add webpack@next webpack-cli --dev

如果你使用npm:

rush:js;"> npm install webpack@next webpack-cli --save-dev

2、webpack 4.0.0.beta.0 新特性介绍

下面是一些你肯定会感兴趣的新特性。如果阅读完本章后还觉得不过瘾，你可以再这查看完整的changelog。

本章将从以下几部分来介绍 webpack 4.0.0-beta.0。

2.1 环境

webpack 运行环境升级。已经不支持 Node.js 4 版本。源码升级到更高的 ECMAScript 版本。

根据 webpack package.json 配置中显示 Node.js 最低支持版本：”node”: “>=6.11.5”

2.2 模块

webpack 模块类型及 .mjs 的支持：

长久以来，JS是webapck中唯一的模块类型。正因此，开发者无法有效地打包其它类型的文件。目前，webpack实现了五种模块类型，它们各有自己的优势，可按需要使用（后面会详细说明）。

  1. javascript/auto: (webpack3中默认)支持所有的JS模块系统：Commonjs、AMD、ESM。
  2. javascript/esm: EcmaScript模块，所有其他模块系统不可用（.mjs文件中默认）。
  3. javascript/dynamic: 不支持Commonjs和EcmaScript模块。
  4. json: JSON数据，可以通过require和import导入（.json文件默认）。
  5. webassembly/experimental: WebAssembly模式（目前处于实验性阶段，.wasm文件默认）。

用法：

module.rules 中的 type 就是新增加的属性，用来支持不同的模块类型。

rush:js;"> module: { rules: [{ test: /\.special\.json$/,type: "javascript/auto",use: "special-loader" }] }

此外，现在webpack 按照 .wasm,.mjs,.js,以及 .json 等扩展名的顺序来解析。

javascript/esm 相比于 javascript/auto 处理ESM更加严格: 具体表现在两个方面：1. 导入的名称必须存在于导入的模块中。2. 动态的模块（非ESM，例如Commonjs）只能通过默认 import 导入，其他所有（包括命名空间导入）的导入都会报错。

2.3 用法

必须在 “开发或者生产” 中选择一种模式（这里有一种隐藏模式 none，可以禁用一切功能）。

1）生产模式不支持监听，开发模式针对快速增量重建进行了优化。 2）生产模式同样支持模块串联，即变量提升（此功能在webpack 3 中已经实现）。 3）开发模式下支持注释和提示，并且支持 eval 的source map。

将 CLI 移动到 webpack-cli 中，你需要通过安装 webpack-cli 使用 CLI。

你可以使用 optimization.* 标志来配置自己的自定义模式。

webpackInclude 和 webpackExclude 可以通过神奇的注释来支持 import() ，他们允许在使用动态表达式时过滤文件。 使用 System.import() 会发出警告:

1）可以使用 Rule.parser.system:true 关闭警告。 2）你也可以使用 Rule.parser.system:false 关闭 System.import()。

对于迁移到新的插件系统的插件 Progressplugin 现在显示插件名称。

webpack 现在可以本地处理 JSON。如果用 loader 转换 json 为 js，需要设置： type:”javascript/auto”。当然，不用 loader webpack 依然可以正常工作。

2.4 配置

删除了一些常用内置插件：

1）NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生产模式默认)。 2）ModuleConcatenationPlugin -> optimization.concatenateModules （生产模式默认）。 3）NamedModulesPlugin -> optimization.namedModules （开发模式默认）。

删除了常用的 CommonsChunkPlugin -> optimization.splitChunks对于那些需要细粒度控制缓存策略的人，可以通过 optimization.splitChunks和 optimization.runtimeChunk。 现在可以使用 module.rules[].resolve来配置解析。它与全局配置合并。

optimization.minimize 用于控制minimizing的开关。 生产模式默认为开，开发模式默认为关。

optimization.minimizer 用于配置minimizers和选项。

许多支持占位符的配置选项现在也支持函数形式。

错误的 options.dependencies 配置现在会抛出异常。

sideEffects 可以通过 module.rules 覆盖。

添加 output.globalObject 配置选项以允许在运行时选择全局对象引用。

无需显式设置entry和output属性，webpack默认设置entry属性为./src，output的属性为./dist。

移除module.loaders。

2.5 优化

uglifyjs-webpack-plugin 升级到了 v 1，并且支持 ES6语法。

可以在 package.json 中配置 sideEffects:false 。当设置这个字段之后，标识在使用的库里没有任何副作用。这意味着webpack可以从代码中安全地清除任何re-exports。

使用JSONP数组来代替JSONP函数 –> 异步支持。

引入新的 optimization.splitChunks 选项。

webpack 可以删除无用代码，之前是由 Uglify 删除无用的代码，现在 webpack 也可以删除无用的代码。这可以有效防止在 import 无用的代码之后发生的崩溃。

以下是一些内部优化： 1）用 tap 调用替换 plugin 调用（新的插件系统）。 2）将许多废弃的插件迁移到新的插件系统API。 3）为 json 模块添加 buildMeta.exportsType:default。 4）删除了 Parser (parserStringArray,parserCalculatedStringArray) 中未使用的方法。

2.6 性能

默认情况，UglifyJS 默认缓存和并行化（并未完全实现缓存和并行化，webpack5的里程碑）。

发布了一个新版本的插件系统，所以事件钩子和处理程序变的单一化。

多个性能改进，特别是更快的增量重建。

改进了RemoveParentModluesPlugin的性能。

2.7 不兼容的改变（插件、loader相关）

新的插件系统：

1）插件方法是向后兼容的 2）插件现在应该这样使用 Compiler.hooks.xxx.tap(,fn)

Chunk.chunks/parents/blocks 不再是数组。在内部使用一个集合，并且有方法来访问它。

Parser.scope.renames 和 Parser.scope.deFinitions 不再是对象/数组，而是Map/Set。

解析器使用 StackedSetMap（类似于LevelDB的数据结构）而不是数组。

在应用插件时不再设置 Compiler.options。

所有模块的构造参数都发生了变化。

将 options 合并到 ContextModule 和 resolveDependencies 的 options 对象中.

更改并重命名 import() 的依赖关系

将 Compiler.resolvers 移入可通过插件访问的 Compiler.resolverFactory中。

Dependency.isEqualResource 已被替换为 Dependency.getResourceIdentifier

Template 方法都是静态的。

已经添加了一个新的 RuntimeTemplate 类，outputoptions 和 requestShortener 已经被移动到这个类中。

1）已经更新了许多方法来代替 RuntimeTemplate 的使用。 2）我们计划将访问运行时的代码移动到这个新类中

Module.Meta已被Module.buildMeta所取代

已添加Module.buildInfo和Module.factoryMeta

Module的一些属性已经被移动到新的对象中

添加指向上下文选项的 loaderContext.rootContext。loaders 可以使用它来创建相对于应用程序根目录的东西。

当启用HMR时，将 this.hot 标志添加到 loader 上下文中。

buildMeta.harmony 已被替换为 buildMeta.exportsType：namespace。

chunk 图已经改变：

之前：Chunks 的连接与嵌套依赖关系有关。 现在：ChunksGroups 的连接与引用依赖有关，按照顺序串联。 之前：AsyncDependenciesBlocks 按顺序引用 Chunks 列表。 现在：AsyncDependenciesBlocks 引用一个 ChunkGroup。

★★ 注意：以上内容都是关于 loaders、plugins 重大的变化。

3、重点更新详解

3.1 更好的默认值

直到今日，webpack 总是要求显式地设置 entry 和 output 属性。webpack 4.0.0-beta.0 中，webpack 会自动设定你的 entry 属性为 ./src 以及 output 的属性为 ./dist。 这意味着您不再需要配置文件来启动 webpack。接下来我们为你演示webpack 4.0.0-beta.0的便捷操作：

1、我们需要安装好 webpack 之后，在 package.json 中添加如下脚本即可启动：

rush:js;"> "scripts": { "build": "webpack" },

2、在工程中添加简单示例代码如下图（整个工程没有 webpack 配置文件，即可运行打包）：

3、打包过程中我们发现有新特性的提示：

WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

这就是我们下节要说的内容模式设置。

★★ 注意：入口默认为 ./src 如果缺少此文件夹会报错！

> webpack --mode production ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\workspace\github\Webpack-Example'

3.2 模式设置

以往的项目使用 webpack3 脚手架生成项目初始模板都会有两个甚至三个配置文件，比如 webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js 而现在可以做到一个配置文件都不需要，直接在启动命令中传入参数 --mode development | production 达到区分不同模式的效果。

接下来修改 package.json 设置不同的模式：

rush:js;"> "scripts": { "dev": "webpack --mode development","build": "webpack --mode production" },

重新执行 npm run dev 或 npm run build 即可看到不同的打包结果：

我们可以看到两种模式的结果完全不同，下面我们会更深入的按照我们真实的需求来讲解一些常用配置。

接下来这个配置是最常用到的，我们使用 webpack 的主要目的之一就是为了更好的支撑前段模块化的能力，既然需要模块化当然少不了代码分割，目前代码分割有以下几种：

  1. 通过 entry 分割不同入口，常用于多页应用；
  2. 通过 CommonsChunkPlugin 插件来分割不同功能模块；
  3. 通过动态 import 来分割。

下面我们主要讲解 webpack 4.0.0-beta.0 版本的重大变化删除了 CommonsChunkPlugin 插件。

3.3 删除 CommonsChunkPlugin

webpack 4.0.0-beta.0删除了 CommonsChunkPlugin，以支持两个新的选项（optimization.splitChunks 和 optimization.runtimeChunk）。

从webpack 4.0.0-beta.0 开始分割 Chunk 将不在使用 CommonsChunkPlugin 插件，而是使用 optimization 配置项，具体的实现原理可以参考 CommonsChunkPlugin。

由于还没有正式官方文档出来，以下是我们通过实践出的 optimization 配置方法： 其中用到了新增的 splitChunks 属性，此属性看字面意思就明白是分割代码块的选项，其下可配置项已在下面示例代码中列出（有兴趣的朋友可以自行实践）：

rush:js;"> entry: { vendor: ['lodash'] },...

optimization: {
splitChunks: {
chunks: "initial",// 必须三选一： "initial" | "all"(默认就是all) | "async"
minSize: 0,// 最小尺寸，默认0
minChunks: 1,// 最小 chunk ，默认1
maxAsyncRequests: 1,// 最大异步请求数， 默认1
maxInitialRequests : 1,// 最大初始化请求书，默认1
name: function(){},// 名称，此选项可接收 function
cacheGroups:{ // 这里开始设置缓存的 chunks
priority: 0,// 缓存组优先级
vendor: { // key 为entry中定义的 入口名称
chunks: "initial",// 必须三选一： "initial" | "all" | "async"(默认就是异步)
test: /react|lodash/,// 正则规则验证，如果符合就提取 chunk
name: "vendor",// 要缓存的 分隔出来的 chunk 名称
minSize: 0,minChunks: 1,enforce: true,maxAsyncRequests: 1,// 最大异步请求数， 默认1
maxInitialRequests : 1,// 最大初始化请求书，默认1
reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
}
}
}
},

以上就是 optimization.splitChunks 的所有可用的配置项属性。

总结

以上就是我们初步整理的关于 webpack 4.0.0-beta.0 的新特性，包含了一部分的官方更新日志的翻译，还有我们自己试验的一些属性。当然如果你有兴趣，也可以等到正式的官方文档发布之后进行实践。 如果上面的信息不能够完全满足你的兴趣，还请关注官方日志。在未来不到一个月的时间里，webpack 将对插件、加载器以及整个生态系统进行更加严格的测试，并发布最终的官方稳定版本。如果你喜欢 webpack，你可以参与使用 webpack 4.0.0-beta.0。测试阶段发现、解决的问题越多，正式版本才会更加稳定。

示例代码

京东前端

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。

Webpack 5 新特性尝鲜

Webpack 5 新特性尝鲜

安装与启动

Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变；
今天我们就来做个对比看看，webpack5 带来了那些全新的改变；
没有对比就没有伤害，为了更好地伤害 webpack 4 , 我们使用 webpack4 和 webpack 5 分别构建一个 React 项目来做对比：

mkdir webpack4 
mkdir webpack5 
# 分别执行 初始化命令 
npm init -y

创建文件 /src/index.js， /src/App.js， /src/index.html

React 代码示例
index.js

import React from "react" 
import ReactDom from "react-dom" 
import App from "./App" 
ReactDom.render(,document.getElementById(''root''))

App.js
image

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 加一行注释 -->
  <div id="root"></div>
</body>
</html>
安装与启动

webpack4 

// webpack4 
npm install webpack@4 webpack-cli@3  html-webpack-plugin css-loader style-loader babel-loader @babel/core  @babel/preset-env  @babel/preset-react  -D 
npm install react react-dom

因为仓库中目前默认就已经是 webpack5 了，所以，想要安装 webpack4， 我们需要加上 @4 的版本号；

webpack5 

// webpack5 
npm install webpack webpack-cli html-webpack-plugin css-loader style-loader babel-loader @babel/core  @babel/preset-env  @babel/preset-react  -D 
npm install react react-dom

基础配置 webpack.config.js

const path = require(''path'')
const HtmlWebpackPlugin = require(''html-webpack-plugin'')
module.exports = {
  // entry 入口，output出口，module模块，plugins 插件  mode工作模式，devServer开发服务器
  // mode 工作模式
  mode: ''development'', // production  、 development、none
  // 入口 
  entry:''./src/index.js'',
  // 出口 
  output:{
    filename:''./bundle.js'',
    path:path.resolve(__dirname,''dist'')
  },
  // 模块 
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:[
          {
            loader:''babel-loader'',
            options:{
              presets:[
                ''@babel/preset-env'',
                ''@babel/preset-react''
              ]
            }
          }
        ]
      },
    ]
  },
  // 插件 
  plugins:[
    new HtmlWebpackPlugin({
      template:''./src/index.html''
    })
  ]
}

启动命令的区别
先安装 npm install webpack-dev-server -D
配置服务器：

  //  服务器
  devServer:{
    port:3004,
    open:true
  },

webpack 4 ： webpack4/package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },

webpack 5 ： webpack5/package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "start":"webpack serve"
  },

资源模块处理

https://webpack.docschina.org/guides/asset-modules/#source-assets

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

在 webpack 5 之前，通常使用：

  • raw-loader 将文件导入为字符串
  • url-loader 将文件作为 data URI 内联到 bundle 中
  • file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource 发送一个单独的文件并导出 URL（之前通过使用 file-loader 实现）
  • asset/inline 导出一个资源的 data UR（之前通过使用 url-loader 实现）
  • asset/source 导出资源的源代码（之前通过使用 raw-loader 实现）
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择（之前通过使用 url-loader，并且配置资源体积限制实现）

webpack4 ：

  // 模块 
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:[
            …………
        ]
      },
      {
        test:/\.(png|jpg|gif)$/,
        // 安装 url-loader  file-loader 
        loader:''url-loader'',
        options:{
          // 小于 8KB 转 base64 
          limit:8*1024
        }
      }
    ]
  },

webpack5 ：

  // 模块 
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
           ……………………
      },
      {
        test:/\.(png|jpg|gif)$/,
        // 通用资源类型
        type:''asset'',
        // 现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：
        // 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
        // 自定义设置
        parser:{
          dataUrlCondition:{
            maxSize:8*1024
          }
        }
      }
    ]
  },

文件缓存

https://webpack.docschina.org/configuration/other-options/#cache

缓存生成的 webpack 模块和 chunk，能够改善构建速度。

cache 会在 开发模式 下被设置成 type: ''memory'' 而且在 生产模式 中被禁用。

cache: true 与 cache: { type: ''memory'' } 配置作用一致。

cache.type

cache.type 将 cache 类型设置成内存或者文件系统。 ''memory'' | ''filesystem''

memory 选项很简单，它会告诉 webpack 将内容存放在内存中并且不允许额外的配置;

filesystem 选项，使用文件缓存系统；

cacheDirectory

cacheDirectory 定义缓存目录， 默认为 node_modules/.cache/webpack。

cache.cacheDirectory 选项仅当 cache.type 被设置成 filesystem 才可用。

webpack.config.js

  //  mode 工作模式
  mode:''development'',
  cache:{
    type:''filesystem'',
    // 默认缓存到 node_modules/.cache/webpack 中 
    // 也可以自定义缓存目录
    // cacheDirectory:path.resolve(__dirname,''node_modules/.cac/webpack'')
  }

image

即使内容修改，增量编译的缓存效果也很明显

更好的 Tree Shaking

https://webpack.docschina.org/guides/tree-shaking/

Tree Shaking 技术，也被称为 “树摇” ，没错，翻译的就是这么直接，意思也很简单，未使用的导出内容不会被打包生成；它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

为了更好说明这个原理，我做了一个动画，全网首发的动画效果，简单解释一下，有两个模块四个方法，在模块 x 中，使用了 B 方法和从模块Y中导入的 C 方法，而 X 模块中自己的 A 和模块 Y 中的 D 方法，并没有使用，虽然定义了，因为没有在任何地方使用过，因此，在 “摇树” 过程中，就会被 “摇掉”；

image

在 webpack 中如何使用呢？其实很简单，只要将 mode 工作模式改为 production 就会自动开启；
而如果想要感受这个树摇带来的震动酥麻酸爽的过程，我们也可以使用手动配置的方式来自行选择，首先需要将 mode 工作模式改为 none，意思就是不做任何优化，全部使用配置的方式，如何配置呢？添加 optimization.usedExports 和 optimization.minimize 选项，意思就是开启树摇及压缩

  //  mode 工作模式
  mode: ''none'', // production、development、none
  // production 生产环境，默认优化打包
  // none 不做任何操作
  // usedExports:true 开启优化（树摇但保留代码）
  // minimize:true 开启压缩 (删除未使用代码)
  optimization:{
    usedExports:true,
    minimize:true
    // innerGraph: true,
  }

接下来，我们再使用简单代码做对比：
index.js

import * as m1 from "./m1";
console.log(m1.m2.nu1)

m1.js

import * as m2 from ''./m2''
export function fun1(){
  console.log(''1--11'',m2.c);
}
export function fun2(){
  console.log(''1--22'')
}
export {m2}

m2.js

export function fun3(){
  console.log(''2--33'');
}
export function fun4(){
  console.log(''2--44'')
}
export const nu1 = 456
export const nu2 = 789

image

相同的代码，在webpack 4 的打包结果中，我们能看到不仅代码量大，而且还有 i=789 这个多余的代码，反观 webpack 5 的打包结果，简洁到难以置信；

模块联邦

多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。
这通常被称作微前端
为了更好地说明这个原理，我做了一个动画，全球首发的动画效果
image

image

导出模块

const path = require(''path'')
const HtmlWebpackPlugin = require(''html-webpack-plugin'')
// const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin")
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
…………
  //  插件 
  plugins: [
    new HtmlWebpackPlugin({
      template: ''./src/index.html''
    }),
    new ModuleFederationPlugin({
      // 模块名字
      name: ''remote'', //导入时使用名称标注
      // 编译后的模块文件名，导入时使用
      filename: ''remoteEntry.js'',
      // 导出模块 关键字与模块名
      exposes: {
        // "key导入时使用的关键字" : "对应模块文件"
        "./Us": ''./src/User.js''
      }
    }),
  ],

导入模块

const path = require(''path'')
const HtmlWebpackPlugin = require(''html-webpack-plugin'')
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
…………
  //  插件 
  plugins: [
    new HtmlWebpackPlugin({
      template: ''./src/index.html''
    }),
    new ModuleFederationPlugin({
      name:''user:55'',
      // 导入外部模块
      remotes:{
        // 导入别名：关键字@地址/导出文件名
        remoteHost:"remote@http://127.0.0.1:3055/remoteEntry.js"
      }
    })
  ],

image

在 ModuleFederationPlugin 实例化的时候传入参数 options 的字段说明:

// 模块名字
name: ''remote'', //导入时使用名称标注
// 编译后的模块文件名，导入时使用
filename: ''remoteEntry.js'',
// 导出模块 关键字与模块名
exposes: {
    // "key导入时使用的关键字" : "对应模块文件"
    "./Us": ''./src/User.js''
}
// 导入外部模块
remotes:{
   // 导入别名：关键字@地址/导出文件名
   remoteHost:"remote@http://127.0.0.1:3055/remoteEntry.js"
}

还有就是 exposes 和 remotes 的字段小伙伴们也要注意，

  • exposes 的暴露字段要写上 ./name
  • remotes 的字段跟暴露模块的 name 保持一致，里面别名的定义也要一致

最后，两个应用同时启动，就会发现最终你要的应用就把其他应用的模块也引入进来了

webpack3升级到webpack4遇到问题总结

webpack3升级到webpack4遇到问题总结

最近由于项目需要，需要对已有的两个vue项目进行webpack3升级到webpack4，此处记录一下整个升级过程的几个重要步骤，以及遇到的问题和解决方案。

1、更新webpack以及相关联插件，webpack4新增插件webpack-cli

npm i -D webpack webpack-cli webpack-dev-server webpack-merge

2、运行npm run dev，报错：Error: webpack.optimize.CommonsChunkPlugin has been removed,please use config.optimization.splitChunks instead.

webpack3升级到webpack4遇到问题总结


原因：webpack.optimize.CommonsChunkPlugin 已废弃，修改为webpack.optimize.SplitChunksPlugin

3、运行报错：Error: Plugin Could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.

webpack3升级到webpack4遇到问题总结


原因：webpack升级，html-webpack-plugin未匹配

解决方案：升级html-webpack-plugin插件

升级插件到 html-webpack-plugin: “^3.2.0”版本，再次运行，报错

webpack3升级到webpack4遇到问题总结


原因：项目中自定义由于需要，需要对每一个打包好的html模版都插入一段js，所以基于html-webpack-plugin自定义了一段插件代码，但是该代码需要根据webpack4重新处理一下，参考官网：https://github.com/jantimon/h...

解决：

第一步：升级插件 npm i -D html-webpack-plugin@next；
第二部修改自定义代码部分，如图：

webpack3升级到webpack4遇到问题总结


4、运行报错：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

webpack3升级到webpack4遇到问题总结


原因：Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

解决： npm install extract-text-webpack-plugin@next；

只更新extract-text-webpack-plugin可能没用，最好更新成mini-css-extract-plugin,具体可看第6步

5、报错：TypeError: Cannot read property 'vue' of undefined

webpack3升级到webpack4遇到问题总结


原因：更新webpack，未更新vue-loader

解决：npm i -D vue-loader

注意：webpack4需要在配置中加入插件的引用才会生效

const VueLoaderPlugin = require('vue-loader/lib/plugin');
//配置中加入
plugins: [
  new VueLoaderPlugin()
],

6、报错

webpack3升级到webpack4遇到问题总结


切换为mini-css-extract-plugin

webpack3升级到webpack4遇到问题总结


7、视情况更新

"vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.10”,"html-webpack-exclude-assets-plugin": "0.0.7","html-webpack-inline-chunk-plugin": "^1.1.1",

8、删除

webpack3升级到webpack4遇到问题总结


在配置中加入

webpack3升级到webpack4遇到问题总结


9、BaseClient.js?e917:12 Uncaught TypeError: Cannot assign to read only property 'exports' of object ‘#
npm run dev不报错，但是在浏览器打开，控制台报错

webpack3升级到webpack4遇到问题总结


原因，webpack4之后，不允许混用 exports和import

解决: 修改include部分为下边这样

webpack3升级到webpack4遇到问题总结


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

我们今天的关于webpack4新特性介绍和webpack4.0的分享已经告一段落，感谢您的关注，如果您想了解更多关于vue-cli 3.0.x升级到webpack4后有哪些新特性、webpack 4.0.0-beta.0版本新特性介绍、Webpack 5 新特性尝鲜、webpack3升级到webpack4遇到问题总结的相关信息，请在本站查询。

本文标签：

上一篇webpack自动更新插件 webpack-dev-server（webpack 自动刷新）

下一篇走近webpack（4）--css相关拓展（webpack css）

相关文章