文档章节

Webpack 4 api 了解与使用

NDweb
 NDweb
发布于 06/24 18:25
字数 658
阅读 271
收藏 4
点赞 0
评论 0

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
博文 62
码字总数 17220
作品 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
如何打造一个令人愉悦的前端开发环境(四)

原文链接 此文是我同事写的,搭建Express结合Webpack。以下是正文,后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实现前后端热更新开发,如果...

乖小鬼YQ
2017/11/29
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
精读《webpack4.0 升级指南》

本周精读的是 webpack4.0 一些变化,以及 typescript 该怎么做才能最大化利用 webpack4.0 的所有特性。 1 引言 前段时间尝试了 parcel 作为构建工具,就像农村人享受了都市的生活,就再也回不...

翱翔大空
07/10
0
0
谁说前端需要懂 Nginx 了?

--读《谁说前端不需要懂-Nginx反向代理与负载均衡》有感 读了上文发现内容虽然还是挺好的,但看完,为啥要懂nginx呀,负载均衡和前端哪里有什么半毛钱关系了,没说清楚呀。 当然这个面向前端...

vellengs
06/22
0
0
webpack 1——核心概念的理解

引子 为什么要写这篇文章?因为今天掘金的早报有一篇关于 Webpack 的入门的文章,读完之后发现自己确实该学习一下 Webpack 了,所以有了这篇文章。 我对于 webpack 的了解仅限于在 vue-cli ...

AdityaSui
05/17
0
0
基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式

这两天看了下的文档,准备搭建一套适用的基本开发架子。 由于我一直使用的是,很少使用过进行项目的开发,因此此构建主要参考的是的项目经验。 项目主要会涉及到的知识点 配置及其优化 升级为...

sinat_17775997
2017/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue-router懒加载

1. vue-router懒加载定义 当路由被访问的时候才加载对应组件 2. vue-router懒加载作用 当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。 ###3. vue-router懒加载实...

不负好时光
12分钟前
0
0
庆祝法国队夺冠:用Python放一场烟花秀

天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花庆祝昨晚法国队夺冠,工作之余也可以随时让程序为自己放一场烟花秀。 这个有趣的小项目并不...

猫咪编程
14分钟前
0
0
SpringBoot | 第七章:过滤器、监听器、拦截器

前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息、统计在线人数、在线用户数、过滤敏高词汇、访问权限控制(URL级别)等业务需求。这些对于业务来说一般上是无关的,业务方是无需...

oKong
28分钟前
4
0
存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储 存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储。 顺序结构和链接结构适用在内存结构中。 顺序表每个单元都是按物理...

DannyCoder
38分钟前
1
0
Firefox 61已经为Ubuntu 提供支持

最新和最好的Mozilla Firefox 61 “Quantum”网络浏览器已经为Ubuntu Linux操作系统的用户提供了支持,现在可以通过官方软件库进行更新。 Mozilla于2018年6月26日发布了Firefox 61版本,该版...

六库科技
今天
0
0
Win10升级后执行系统封装(Sysprep)报错

开始封装 一年多以前开始给公司封装Win10系统,便于统一给公司电脑初始化携带各种软件的系统,致力于装完既可以开发的状态。那时候最新的版本是Win10 1703版本,自然就以他为母盘,然后结合V...

lyunweb
今天
40
0
php 性能优化

#什么情况下会遇到性能问题 PHP 语法使用的不恰当

to_be_better
今天
0
0
Jenkins 构建触发器操作详解

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * * * * * (五颗星,中间用空格隔...

覃光林
今天
0
0
IDEA配置技巧

超详细设置Idea类注释模板和方法注释模板 idea去掉注解param下划线 JetBrains全系列破解

AK灬
今天
0
0
rsync通过服务同步/Linux系统日志/screen工具

rsync通过服务同步 分为服务端(机器A) 和客户端(机器B) 机器A操作编辑/etc/rsyncd.conf配置文件 [root@yolks1 ~]# vim /etc/rsyncd.conf 文件中添加以下配置 port=873 ...

Hi_Yolks
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部