文档章节

Webpack 4 api 了解与使用

NDweb
 NDweb
发布于 06/24 18:25
字数 658
阅读 318
收藏 4

webpack 最近升级到了 v4.5+版

01 官方不再支持 node4 以下版本

官方不再支持 node4 以下版本

官方不再支持 node4 以下的版本,所以如果你的node版本太低,先开始升级node吧!

话说node10 都出来了一段时间了,想必现在没人会去装 node v4 以下的版本了,node官网都已经宣布node4.x已经结束使命了。

02cli功能移到了webpack-cli

cli功能移到了webpack-cli

cli功能从webpack移到了webpack-cli,所以如果你要使用cli功能,除了安装 webpack 外,还需要安装 webpack-cli (基本都会使用cli ~)

yarn add -D webpack webpack-cli (npm install)

03用新配置项mode配置生产或开发环境

用新配置项mode配置生产或开发环境

用新的配置项--mode配置生产或开发环境 (mode 可以是production或development或none)。

可以在 webpack 命令加上--mode参数,或者在 webpack 配置文件中加上。

11

production 模式会开启各种特性优化构建,使用 scope hoisting 和 tree-shaking,自动启用 uglifyjs 对代码进行压缩,并且会自动将 process.env.NODE_ENV 设置为production。development 模式主要会优化开发时的增量构建,另外 process.env.NODE_ENV 会被设置为development,无需再用 define 插件定义。

04开始使用optimization.splitChunks

开始使用optimization.splitChunks

CommonsChunkPlugin被废弃,开始使用optimization.splitChunks

之前我们做代码分割,少不了用 CommonsChunkPlugin 分离 vendor 和app代码。 

05提取 css

ExtractTextWebpackPlugin 和 mini-css-extract-plugin 提取 css。

这两个插件都可以用于提取 css 到独立的文件,ExtractTextWebpackPlugin 是 webpack v4 前大家都使用的插件, 现在也支持 webpack v4(不过在使用的时候发现有时会生成一些空的css文件), 而 mini-css-extract-plugin 是一个轻量级易于使用的基于 webpack v4 的插件,使用后感觉性能更好,大家可以尝试。

06其他调整项备忘

NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors(默认情况下处于生产模式)
ModuleConcatenationPlugin- > optimization.concatenateModules(默认情况下处于生产模式)
NamedModulesPlugin- > optimization.namedModules(在开发模式下默认开启)
webpack命令优化 -> 发布了独立的 webpack-cli 命令行工具包
webpack-dev-server -> 建议升级到最新版本
html-webpack-plugin -> 建议升级到的最新版本
file-loader -> 建议升级到最新版本
url-loader -> 建议升级到最新版本

© 著作权归作者所有

共有 人打赏支持
NDweb
粉丝 4
博文 68
码字总数 19222
作品 0
海淀
程序员
ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑
2017/12/18
0
0
Webpack 4 配置最佳实践

作者 Daniel 蚂蚁金服·数据体验技术团队 Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人...

蚂蚁金服数据体验技术
06/25
0
0
【webpack】学习记录 (一)

[TOC] 简介 官网 是以模块依赖和生成静态资产代表这些模块。通俗一点理解就是,把所有依赖的脚本,样式,统一打包,减少前端请求,并且可压缩,可混淆 优势 支持ES6 支持AMD/CMD 插件丰富 并...

小彬彬_
2016/09/12
26
0
webpack-react 之 webpack 篇(上)

构建一个小项目——FlyBird,学习webpack和react。 (本文成文于2017/2/25) 从webpack开始 本篇从零开始,详细记录webpack的各个方面。 文章中将会放入很多链接以便扩展,我也会归纳总结,不...

awufan
07/12
0
0
Web 开发的未来:React、Falcor 和 ES6

Widen是一家数字资产管理解决方案提供商。目前,其技术栈还非常传统,包括服务器端的Java、浏览器端的AngularJS、提供REST API支持的Jersey以及jQuery、 Underscore、lodash、jQuery UI和Boo...

oschina
2015/10/19
8.4K
28

没有更多内容

加载失败,请刷新页面

加载更多

Oracle return exit continue

常在循环体中看到下面3种语句: return exit continue 举例说明 啥都没有 -- none begin for i in 1 .. 10 loop if i < 5 then dbms_output.put_line('i < 5, i = ' || to_char......

taadis
59分钟前
2
0
JSONObject 转换时出错 InvocationTargetException

JSONObject 转换时出错java.lang.reflect.InvocationTargetException 一时看不出来是什么问题。 挺奇怪的。 百度参考了一下这个 网页的解决方案 说是类型不对,空? 仔细查看代码,果然是有一...

之渊
今天
3
0
no such module 'pop'问题

在github上 clone 了一个 swift 项目,编译时提示"no such module 'POP'"错误,查了一下居然是因为podfile中指定的最低版本是iOS 11.0,大于我测试手机的iOS版本10.3.3,将Podfile中的最低版...

yoyoso
今天
3
0
redis 系列一 -- 简介及安装

1.简介 redis -- remote dictionary server 远程字典服务 使用 C 语言编写; 高性能的 key-value数据库; 内存数据库,支持数据持久化。 Redis 是一个开源(BSD许可)的,内存中的数据结构存...

imbiao
今天
4
0
nginx log记录请求响应时间

有时为了方便分析接口性能等,需要记录请求的时长,通过修改nginx的日志格式可以做到,如 添加一个新的log_format log_format timed_combined '$remote_addr - $remote_user [$time_local] "...

swingcoder
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部