安装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. Linux 显示权限

    Linux 显示权限 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls -lh 总用量 56K -rw-r--r-- 1 youhaidong youhai ...

  2. .net core 环境安装失败,错误:0x80072EE2

    安装[DotNetCore.1.0.1-VS2015Tools.Preview2.0.3.exe]失败,提示这个界面 查看log发现,发现猫腻,然后copy下链接,用迅雷手动下载[AspNetCore ...

  3. Good Bye 2017 D. New Year and Arbitrary Arrangement

    看了别人的题解 首先这题是一个dp dp[i][j] i是当前有多少个a j是当前有多少个ab子序列 dp[i][j] = dp[i+1][j]*Pa + dp[i][i+j]*Pb; i,j 时加一 ...

  4. Codeforces Round #454 D. Seating of Students

    分三类 1 1: 一个就好了 3 3:特殊讨论下 或 : 第一行奇序号的数放前面,偶序号的数放后面,第二行奇序号的数放前面,偶序号的数放后面,第二行依次类推 有点难写,真的菜 #include< ...

  5. box-sizing -- 盒模型

    项目开发中,在浏览同事的代码,发现他经常用一个属性--box-sizing,很好奇是什么,于是乎,上网查阅资料学了起来. 首先我们先复习一下盒模型的组成:一个div通常由 content(内容)+ma ...

  6. CSS3盒子模型

    web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...

  7. 一道java基础面试题

    package test; class A {    public A(){        System.out.println("A3");    }    {        S ...

  8. UML 中extend和include的区别

    在UML用例图中有两种关系——包含和扩展,容易混淆,下面通过一张表来区别一下这两种关系.

  9. 在虚拟机VMware上安装Linux系统教程

    目录: 一.       CentOS的安装 二.       RedHat的安装 三.       VMwaretools的安装 此处提供CentOS和RedHat两个版本的系统安装流程,至于选哪个 ...

  10. cesium 热力图