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

前段时间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项目里面看，官方有介绍

---

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