安装v4.0.0-beta.0

yarn add webpack@next webpack-cli --dev

或者

npm install webpack@next webpack-cli --save-dev

测试例子

创建文件:



运行结果:

哪些新特性

1 不在需要设置配置文件(如上例子)

默认入口文件为./src 默认输出文件为./dist

2 可以选择两种模式:生产模式和开发模式



可以看到,开发模式构建花的时间更少,最终的main.js文件更大;而生成模式构建时间更长,最终的main.js文件更小。

生产模式:做了各种类型的优化:压缩,作用域提升等,默认包含了需要手动加入的插件,比如NoEmitOnErrorsPlugin

开发模式:提高了构建速度,输出文件(main.js)更易阅读(自动包含了文件路径名等)

增加了sideEffects配置

在你要导入的库的package.json中增加sideEffects:false配置

demo查看

JSON支持和Tree Shaking(无用代码清除)

通过Es6语法导入JSON时,webpack会自动去除没有使用的exports。

升级到UglifyJS2

意味着可以使用ES6语法并且能压缩它(而无需转换)

干掉了CommonsChunkPlugin配置

查看具体说明

作者知乎/公众号:前端疯

webpack----webpack4尝鲜的更多相关文章

  1. 前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析,Web Worker 实战

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...

  2. Windows 10 周年版尝鲜

    早在今年的 Build 大会上,微软就开始宣传最新的 Windows 10 周年版更新,炫了不少特技,直到昨天(2016/8/2 PST)才正式放出,相关新闻可以参考这里,正式的版本为 Version ...

  3. 【翻译】五步快速使用LINQPad尝鲜StreamInsight

    StreamInsight  学习地址:http://www.cnblogs.com/StreamInsight/archive/2011/10/26/StreamInsight-Query-Seri ...

  4. 小程序新能力-个人开发者尝鲜微信小程序

    个人开发者的福利 微信小程序,刚听到这个新名词的时候,我就兴冲冲的去找入口,看看自己能不能搞个微信小程序的HelloWorld,毕竟能在微信上把自己写的一些小工具跑起来还是满炫酷的. 没想,网上一查, ...

  5. 【响应式】foundation栅格布局的“尝鲜”与“填坑”

      提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...

  6. Spring-Data-JPA尝鲜:快速搭建CRUD+分页后台实例

    前言:由于之前没有接触过Hibernate框架,但是最近看一些博客深深被它的"效率"所吸引,所以这就来跟大家一起就着一个简单的例子来尝尝Spring全家桶里自带的JPA的鲜 Spr ...

  7. 微信团队分享:Kotlin渐被认可,Android版微信的技术尝鲜之旅

    本文由微信开发团队工程是由“oneliang”原创发表于WeMobileDev公众号,内容稍有改动. 1.引言   Kotlin 是一个用于现代多平台应用的静态编程语言,由 JetBrains 开发( ...

  8. Linux下尝鲜IDE Rider .NET又一开发利器

    RiderRS 扯淡:很多人说:jetbrains出品,必属精品,jetbrains确实出了不少好东西,但是他的产品总感觉越用越慢,我的小Y430P高配版也倍感压力,内存占用率高. Multiple ...

  9. Win10尝鲜体验——初识传说中不一样的Windows 分类: 资源分享 2015-07-24 18:27 13人阅读 评论(0) 收藏

    这几天,网上传来一个消息,虽然不知是好是坏,Win10可以下载安装了! 出于好奇,下载尝鲜,几个截图,留作纪念~ 中文,还是要好好支持的,毕竟中国有如此多的用户 可选的安装版本 许可条款也刚刚出炉,估 ...

  10. 微信小程序“满月”:尝鲜之后你还用过它吗?

    距离 2017 年 1 月 9 日微信小程序上线,整整过去了一个月时间.和互联网时代每天出现的众多新鲜事物相似,小程序甫一诞生,立即占据了各大科技媒体网站头屏并引起社交圈的兴奋讨论.由于背靠微信,纷纷 ...

随机推荐

  1. 芝麻HTTP:爬虫之设置Selenium+Chrome代理

    微博登录限制了错误次数···加上Cookie大批账号被封需要从Cookie池中 剔除被封的账号··· 需要使用代理··· 无赖百度了大半天都是特么的啥玩意儿???结果换成了 Google手到擒来 分分 ...

  2. CentOS使用nmcli配置网络

    nmcli 查看网络设备信息 nmcli dev status 查看所有连接的列表 nmcli connection show nmcli connection show --active 查看活动连 ...

  3. Redis进阶实践之十五 Redis-cli命令行工具使用详解第二部分(结束)

    一.介绍           今天继续redis-cli使用的介绍,上一篇文章写了一部分,写到第9个小节,今天就来完成第二部分.话不多说,开始我们今天的讲解.如果要想看第一篇文章,地址如下:http: ...

  4. 翻译--Thinking in React

    无聊翻译篇react入门文章,去年学习react时看了一遍,很不错的一篇文章. https://reactjs.org/docs/thinking-in-react.html 部分为意译,旨在让new ...

  5. 页面某些特定图标的权限,比如导入导出表格,下载等等,这个权限必须在有某个页面查看的权利的基础上(细粒度)(shiro项目中来的四)

    一,查找按钮权限的设置 第一步:会根据用户的相关信息去查到它的角色表: SELECT * FROM SYS_USER WHERE user_id='eded77bdf35347249b2bacfa18 ...

  6. 异常-----freemarker.template.TemplateException: Expected collection or sequence. datas evaluated instead to freemarker.core.HashLiteral$SequenceHash on line 7, column 18 in inc/select.ftl.

    1.错误描述 六月 26, 2014 11:26:27 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  7. js、css等引入文件路径正确,却报404的解决办法

    问题的原因,一般是web.xml文件的过滤器给设置"/"或者"/*"全部拦截了,你可以这样设置过滤器,"*.html"等,就可以正常引用文件 ...

  8. JDK 9.0.4安装过程

    因为种种问题,怀疑是因为JDK版本不对劲,于是打算将JDK重新搞一下. 不看不知道,看了吓一跳,我的笔记本里现在起码有5.6甚至更多个JDK,JRE,并且由于年久失修,我也不知道这些东西怎么装上去的, ...

  9. [COGS2701]:动态树

    题面 传送门 Sol LCT维护子树和 # include <bits/stdc++.h> # define IL inline # define RG register # define ...

  10. MyBatis相关配置

    在MyBatis中,不免会有一些配置要设置,我们先来看一下MyBatis配置XML文件的层次结构,这些层次是不能够颠倒顺序的,下面是层次结构: <?xml version = "1.0 ...