文档章节

Webpack 4 api 了解与使用

NDweb
 NDweb
发布于 06/24 18:25
字数 658
阅读 334
收藏 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
博文 71
码字总数 22920
作品 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 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人...

蚂蚁金服数据体验技术
10/30
0
0
Vue SSR( Vue2 + Koa2 + Webpack4)配置指南

正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请先移步 ssr.vuejs.org 了解手工进行SSR配置的基本内容。 从头搭建一个服务端渲染的应用是相当复杂的。如...

轶哥
11/12
0
0
webpack4.0各个击破(7)—— plugin篇

作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学...

大灰狼的小绵羊哥哥
09/02
0
0
webpack-react 之 webpack 篇(上)

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

awufan
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

揭秘 | 双11逆天记录背后的数据库技术革新

摘要: 第十个天猫“双11”狂欢节圆满落幕,如今双11已不仅仅是天猫的盛会,更是阿里技术人的新年 每一个数字背后 都需要强大的技术支撑 Higher, Faster, Smarter 是我们不变的追求 技术无边...

阿里云云栖社区
23分钟前
4
0
element ui中的input组件不能监听键盘事件解决

vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-input v-model="search" p...

呵呵闯
25分钟前
3
0
Linux常用中间件启动命令

zookeeper redis lts

王桥修道院副院长
26分钟前
2
0
Kotlin极简教程中对? extends 和 ? super (out和int)的描述

PECS 现在问题来了:我们什么时候用extends什么时候用super呢?《Effective Java》给出了答案: PECS: producer-extends, consumer-super 比如,一个简单的Stack API: public class Stack<E...

SuShine
27分钟前
1
0
微信分享link问题

前提:公司业务,分享的页面需要自定义并且是一个固定页面 因此自定义分享link,这里存在一个问题,必须与安全域名一致,自不必说,而且这个link必须是当有协议的,也就是说不能写成locatio...

litCabbage
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部