构建工具Webpack 4 新特性_前端开发者

前端开发者丨Webpack
https://www.rokub.com
而在2017年8月份的时候,webpack 团队从 master 分支切出了 next 分支用于 webpack 4 的开发,经历 5 个月的开发周期之后,webpack 4.0-beta 在 2018年1月 已经 Released 了,不仅兑现了之前的承诺,还带来了诸多新特性,在用户使用的体验上也作了诸多改进。
安装如果需要使用 webpack 4,则需要从 next 分支上安装:// yarn yarn add webpack@next webpack-cli –dev // npm npm install webpack@next webpack-cli –save-dev 1 2 3 4 5 // yarn yarn add webpack < a href = \”https://www.rokub.com/” > @ next < / a > webpack – cli — dev // npm npm install webpack < a href = \”https://www.rokub.com/” > @ next < / a > webpack – cli — save – dev不完全迁移指北环境不再支持 node.js 4。
根据 package.json 配置, node.js 的最低支持版本为 6.11.5模块类型webpack 4之前,js 是 webpack 中的唯一模块类型,因而不能有效地打包其它类型的文件。
而 webpack 4 则提供了 5 种模块类型:javascript/auto : (webpack 3中的默认类型)支持所有的JS模块系统:CommonJS、AMD、ESM: (webpack 3中的默认类型)支持所有的JS模块系统:CommonJS、AMD、ESM javascript/esm : EcmaScript 模块,在其他的模块系统中不可用(默认 .mjs 文件): EcmaScript 模块,在其他的模块系统中不可用(默认 文件) javascript/dynamic : 仅支持 CommonJS & AMD,EcmaScript 模块不可用: 仅支持 CommonJS & AMD,EcmaScript 模块不可用 json : 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件): 可通过 和 导入的 JSON 格式的数据(默认为 的文件) webassembly/experimental : WebAssembly 模块(处于试验阶段,默认为 .wasm 的文件)此外,webpack 4 中会默认解析 .wasm , .mjs , .js 和 .json 为后缀的文件。
在对应文件的 loader 配置,需要增加 type 字段来指定模块类型:module: { rules: [{ test: /\\.special\\.json$/, type: \”javascript/auto\”, use: \”special-loader\” }] } 1 2 3 4 5 6 7 module : { rules : [ { test : / \\ . special \\ . json $ / , type : \”javascript/auto\” , use : \”special-loader\” } ] }javascript/auto / javascript/esm 都可以处理 ESM, 但后者会更加严格:导入的名称必须存在于导入的模块中动态的模块(非 ESM,如 CommonJS)只能通过默认 import 导入,其它方式(包括命名空间)的导入都会报错对于 WebAssembly 模块:可以导入其它模块(JS 和 WASM)试图在 WASM 模块中导入不存在的模块将会得到一个警告或者错误ESM 可以引入 WASM 模块中导出的模块名仅可在 async chunks(通过 import() 导入的模块)中使用,在 initial chunks 中是无效的(不利于提升 web 应用的性能)import() : 动态导入在 webpack 4 中, import() 会返回一个带命名空间( namespace )的对象,这对 ES Module 不会有影响,但对于遵循 commonjs 规范的模块则会加一层包裹:// webpack 2/3 import(\”./commonjs\”).then(exports => { … }) // webpack 4 import(\”./commonjs\”).then({default: exports}=> { … }) 1 2 3 4 5 6 7 8 9 // webpack 2/3 import ( \”./commonjs\” ) . then ( exports = > { . . . } ) // webpack 4 import ( \”./commonjs\” ) . then ( { default : exports } = > { . . . } )mode : 模式配置mode 是 webpack 4 中新增加的参数选项,其有两个可选值: production 和 development 。
mode 不可缺省,需要二选一:production 模式: 默认提供所有可能的优化,如代码压缩/作用域提升等不支持 watchingprocess.env.NODE_ENV 的值不需要再定义,默认是 production/** webpack.production.config.js **/ // webpack 2/3 module.exports = { plugins: [ new UglifyJsPlugin(/* … */), new webpack.DefinePlugin({ \”process.env.NODE_ENV\”: JSON.stringify(\”production\”) }), new webpack.optimize.ModuleConcatenationPlugin(), new webpack.NoEmitOnErrorsPlugin() ] } // webpack 4 module.exports = { mode: ‘production’ } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /** webpack.production.config.js **/ // webpack 2/3 module . exports = { plugins : [ new UglifyJsPlugin ( /* … */ ) , new webpack . DefinePlugin ( { \”process.env.NODE_ENV\” : JSON . stringify ( \”production\” ) } ) , new webpack . optimize . ModuleConcatenationPlugin ( ) , new webpack . NoEmitOnErrorsPlugin ( ) ] } // webpack 4 module . exports = { mode : ‘production’ }development 模式: 主要优化了增量构建速度和开发体验process.env.NODE_ENV 的值不需要再定义,默认是 development的值不需要再定义,默认是 开发模式下支持注释和提示,并且支持 eval 下的 source maps/** webpack.development.config.js **/ // webpack 2/3 module.exports = { plugins: [ new webpack.NamedModulesPlugin(), new webpack.DefinePlugin({ \”process.env.NODE_ENV\”: JSON.stringify(\”development\”) }) ] } // webpack 4 module.exports = { mode: ‘development’ } 1 2 3 4 5 6 7 8 9 10 11 12 13 /** webpack.development.config.js **/ // webpack 2/3 module . exports = { plugins : [ new webpack . NamedModulesPlugin ( ) , new webpack . DefinePlugin ( { \”process.env.NODE_ENV\” : JSON . stringify ( \”development\” ) } ) ] } // webpack 4 module . exports = { mode : ‘development’ }此外, webpack 4 还提供一种隐藏( none )模式,这种模式下会禁用一切优化sideEffects 设置webpack 4 在 package.json 中引入了对 sideEffects: false 的支持。
当模块的 package.json 中添加该字段时,表明该模块没有副作用,也就意味着 webpack 可以安全地清除被用于重复导出(re-exports)的代码。
JSONwebpack 4 不仅支持本地处理 JSON,还支持对 JSON 的 Tree Shaking。
当使用 ESM 语法 import json 时,webpack 会消除掉JSON Module 中未使用的导出。
此外,如果要用 loader 转换 json 为 js,需要设置 type 为 javascript/auto :module.rules: [ { test: /\\.special\\.json$/, type: \”javascript/auto\”, use: \”special-loader\” } ] 1 2 3 4 5 6 7 module . rules : [ { test : / \\ . special \\ . json $ / , type : \”javascript/auto\” , use : \”special-loader\” } ]配置删除了一些常用内置插件: NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生产模式默认) ModuleConcatenationPlugin -> optimization.concatenateModules (生产模式默认) NamedModulesPlugin -> optimization.namedModules (开发模式默认)。
删除了 CommonsChunkPlugin,取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk ,这提供了细粒度的缓存策略控制可以使用 module.rules[].resolve 来配置解析,它会与全局配置合并。
来配置解析,它会与全局配置合并。
optimization.minimize 用于控制 minimizing 的开关。
生产模式默认为开,开发模式默认为关。
用于控制 minimizing 的开关。
生产模式默认为开,开发模式默认为关。
optimization.minimizer 用于配置 minimizers 和选项。
用于配置 minimizers 和选项。
许多支持占位符(placeholders)的配置选项现也支持函数形式错误的 options.dependencies 配置将报错配置将报错 sideEffects 可以通过 module.rules 覆盖可以通过 覆盖 output.hashFunction 可以是一个构造函数,用于自定义 hash 函数。
处于性能考虑,也可以提供非加密哈希函数可以是一个构造函数,用于自定义 hash 函数。
处于性能考虑,也可以提供非加密哈希函数 output.globalObject 可以用于配置运行时的全局对象引用可以用于配置运行时的全局对象引用 默认配置 webpack 默认会按照 .wasm , .mjs , .js 和 .json 的扩展名顺序查找模块。
output.pathinfo 在开发模式下默认是打开的 生产环境下,默认关闭内存缓存 entry 的默认值是 ./src , output.path 的默认值是 ./dist 在选择模式选项时,默认值是 production优化uglifyjs-webpack-plugin 发布 v1,支持 ES2015发布 v1,支持 ES2015 使用 JSONP 数组来代替 JSONP 函数 –> 异步支持webpack 自身也可以删除无用代码。
webpack 2/3 中是在 Uglify 时删除无用代码,webpack 4 中 webpack 也可以(在某些情况下)删除无用代码,避免 import() 引用无用代码时导致的奔溃引用无用代码时导致的奔溃 作用域提升后的模块将生成更少的代码性能默认情况,UglifyJS 会默认缓存和并行化(完全实现缓存和并行化将在 webpack 5 中实现)多个性能改进,尤其是在增量构建这方面改进了 RemoveParentModluesPlugin 的性能的性能 未使用模块不再有非必要的作用域提升添加 ProfilingPlugin,此插件会(在 Chrome 浏览器中)创建一个包含各插件时间消耗的文件for of 代替 forEach ; Map/Set 代替 Objects ; includes 代替 indexOf代替 ; 代替 ; 代替 同一个任务只会进入队列一次移除的功能移除了 module.loaders移除了 loaderContext.options移除了 Compilation.notCacheable移除了 NoErrorsPlugin移除了 Dependency.isEqualResource移除了 NewWatchingPlugin移除了 CommonsChunkPlugin相关资源
前端开发者丨Webpack
» 本文来自:前端开发者 » 《构建工具Webpack 4 新特性_前端开发者》
» 本文链接地址:https://www.rokub.com/259.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!