开发者社区> 李一花> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Webpack 4 api 了解与使用

简介: webpack 最近升级到了 v4.5+版,01 官方不再支持 node4 以下版本
+关注继续查看

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 的插件,使用后感觉性能更好,大家可以尝试。

092215_FXQB_2663968.jpg

Webpack 4 api 了解与使用 

 
NDweb
  NDweb 发布于 06/24 18:25
 
字数 658
 
阅读 259
 
收藏 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 hoistingtree-shaking,自动启用 uglifyjs 对代码进行压缩,并且会自动将 process.env.NODE_ENV 设置为productiondevelopment 模式主要会优化开发时的增量构建,另外 process.env.NODE_ENV 会被设置为development,无需再用 define 插件定义。

04开始使用optimization.splitChunks

开始使用optimization.splitChunks

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

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

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 -> 建议升级到最新版本

原文发布时间为:2018年06月24日
原文作者:开源中国

本文来源:开源中国 如需转载请联系原作者















版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端技术—webpack 打包 css 文件 | 学习笔记
简介:快速学习前端技术— webpack 打包 css 文件
12 0
ts重点学习142-使用webpack打包ts文件笔记
ts重点学习142-使用webpack打包ts文件笔记
11 0
webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object
webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object
26 0
webpack打包优化之外部扩展(Externals)配置
webpack打包优化之外部扩展(Externals)配置
125 0
[TypeScript]webpack打包ts代码
我们既然需要用到webpack,那么我们肯定要用到npm这个包管理器,所以我们不能少了package.json文件(这个文件用来管理我们的项目)
77 0
vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
199 0
【前端第十三课】npm机制,掌握常用命令;webpack打包的基本含义;组件的生命周期;React路由
【前端第十三课】npm机制,掌握常用命令;webpack打包的基本含义;组件的生命周期;React路由
78 0
Webpack的基本配置和打包与介绍(二)📦
Webpack的基本配置和打包与介绍(二)📦
62 0
Webpack的基本配置和打包与介绍(一)⚡️
Webpack的基本配置和打包与介绍(一)⚡️
79 0
一篇文章带你浅入webpack的DLL优化打包
我们在使用第三方包的时候,一般内部的代码都不会变,但是当webpack打包的时候,还是回去处理第三方包。我们是否可以利用一些方法来改进呢?我们可以先对第三方包处理,然后再打包。
68 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于webpack和npm的前端组件化实践
立即下载
APICloud服务CAF开发者
立即下载
低代码开发师(初级)实战教程
立即下载