webpack4.0初体验、各版本及parcel性能对比

MarvinZhang 发布于2019-08-22 15:11 / 2372人阅读

摘要：前段时间又发布了新版本我接触的时候已经版本了支持的版本必须打包速度大小比较以及粗浅的试了一下下图所示，黄色为版本绿色为我写的配置，跟基本相似，具体不同下面会介绍蓝色是自带的模式红色为具体大小速度大家可以比较一下，还是很给力的关于配置方面，应

前段时间webpack又发布了新版本webpack4
我接触的时候已经4.1版本了
node支持的版本必须"node": ">=6.11.5"

webpack打包速度大小比较以及parcel

粗浅的试了一下
下图所示，黄色为webpack3版本；绿色为我写的配置，跟webpack3基本相似，具体不同下面会介绍；蓝色是webpack4自带的production模式；红色为parcel；
具体大小速度大家可以比较一下，还是很给力的

关于配置方面，webpack4应该说最大的噱头就是零配置了

webpack4简单介绍

安装

首先在安装上，我们照往常一样

npm i webpack

这里需要注意一点，webpack4需要安装webpack cli，跟往常不一样，大家安装好webpack4以后并不能直接使用，会提示你安装webpack cli

运行

第一步安装完之后，我们就可以直接实验了
这是我的文件目录，其中webpack.config.js不需要，这是我后面实验用的，写上自己的js就可以运行了

webpack4默认配置，入口文件默认src/index.js，输出默认dist/main.js

下面是我的配置文件，我测试速度写的，webpack4有默认配置

var path = require("path")
var webpack = require("webpack")

module.exports = {

  entry: path.resolve("", "./src/index.js"),

  output: {
    path: path.resolve("", "./dist"),
    filename: "[name].js",
  },//出口

  optimization: {
    minimize: true
  },

  mode: "none",

}

UglifyJs的相关配置变化

压缩插件写法已经不一样了，换成了

optimization: {
    minimize: true
  },

//原先的写法，现在会报错，具体看下图
plugins: [

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),//代码压缩，开发环境慎用
  ]

新增的mode字段，默认模式配置

另外，大家看到了，里面有个mode："node"，这个是设置模式的
production为默认生产模式，development为生产模式，另外有一个隐藏的none模式，node模式就是不使用默认的，采用我们所配置的
这里有个细节，那就是，当我们设置了pro、dev模式的时候，我们写的配置会被忽略，采用默认的，所以自己配置必须写none模式
自己写配置的话，如果不写node字段，并且没有设置压缩，会警告，代码过大让你拆分

多余的话

新手第一次写文章，喜欢或者对你有用麻烦点一下赞收藏~
如有不对欢迎各位指点~
我也是最近网上没看到太多文章才自己试了一下
具体的跟以前版本不同的内容大家可以去gayhub项目里面看，官方有介绍

本文只要介绍自己粗浅的实验~后期有更多接触我会更新的~

专线服务服务器托管初体验各编程语言及领域各大云服务器对比 linux 各版本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93243.html

前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一个核心特性，苹果表示也正在开发中，按开发进度可能几个月后就能与我们见面。是基于的本地化数据库，支持以及浏览器环境。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。本期是 2017 年的最后一...

赵春朋 2019-08-21 18:24 评论0 收藏0
Android面试知识整理

摘要：全面而详尽的面试题集面试系列总结全方面覆盖知识结构什么是如何避免指的是应用程序在一段时间内无响应，系统会向用户弹出一个应用无响应的对话框，用户可以选择关闭应用或者继续等待应用响应，这往往是由于程序的性能所引发的。全面而详尽的Android面试题集Android面试系列2018总结(全方面覆盖Android知识结构) 1. 什么是ANR？如何避免？ ANR（Application N...

U2FsdGVkX1x 2019-06-25 12:23 评论0 收藏0
2017 年崛起的 JS 项目

摘要：通过对比各项目过去个月在上新增数量，来评估其在年度的受关注程度，进而选出年度领域崛起的明星项目。也许正因为上述最后一点，在中国拥有大量的拥趸。不仅被中国最大的电商平台阿里巴巴使用，也获得了与这些公司青睐。共 4741 字，读完需 8 分钟，速读 2 分钟。我有幸参与了该项目的部分中文版翻译、校对工作，感谢 Sacha Grief，Micheal Ramberu 的统计整理，以及 Fr...

gaara 2019-08-22 13:57 评论0 收藏0
浅谈webpack4.0 性能优化

摘要：中在性能优化所做的努力，也大抵围绕着这两个大方向展开。因此，将依赖模块从业务代码中分离是性能优化重要的一环。大型库是否可以通过定制功能的方式减少体积。这又违背了性能优化的基础。接下来可以抓住一些细节做更细的优化。中，为默认启动这一优化。前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为...

leanxi 2019-08-26 13:25 评论0 收藏0
如何优雅的升级到 webpack4

摘要：默认出入口在中，不再强制要求指定和路径。构建模式提供了两种构建模式可供选择和选项描述会将的值设为。如果是，那就会开启。默认只会对按需加载的代码做分割。在或更低版本中，如果你想为一个推导出来的定制选项，你不得不在自己的选项中将它重复一遍。前言现在距离2018年2月15号webpack4.0.0出来已经有一段时间了，现在已经出了 @vue/cli 3.0，但是楼主还没试过，听说很强大，...

zhangfaliang 2019-08-22 18:36 评论0 收藏0