详解webpack4升级指南以及从webpack3.x迁移

转载  更新时间:2018年06月12日 10:01:15   作者:xhsdnn   我要评论

本篇文章主要介绍了详解webpack4升级指南以及从webpack3.x迁移,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移。

题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式。毕竟之前parcel的0配置确实抢了很多webpack的风头,然后也去弄了一下parcel使用parcel+vue的简单模版工程,有兴趣可以看一下。

一、webpack4的新东西

0. 安装

不在只安装webpack即可,还需要安装一个webpack-cli

全局安装

sudo npm install -g webpack webpack-cli

局部安装(当前文件夹)

npm install --save-dev webpack webpack-cli

1. 0配置

默认的入口为 './src/' 和默认出口 './dist'

对压缩(optimization.minimize)的设置,默认在production时开启,在development时关闭。

默认配置不仅限于上述两项。

2. mode/–mode参数

新增了mode/--mode参数来表示是开发还是生产,mode有两个可选值:development和production,production不支持监听,production侧重于打包后的文件大小,development侧重于构建的速度。

webpack --mode development

也可以在配置文件中配置:

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. 对uglifyjs升级

在之前的vue脚手架创建的基于webpack的工程,在webpack.prod.conf.js中可以清晰的看到配置中有这么一行:

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

在webpack4.0中已经可以压缩es6代码,如:

class user {
 getUsername() {
  // to do
 }
}

压缩之后为:

4. 移除loaders,必须使用rules

在webpack3.x中还保留之前版本的loaders,与rules并存都可以使用,在新版中完全移除了loaders,必须使用rules。

5. sideEffects

在模块的package.js中添加sideEffects:false,当使用export单独导出的时候,不会打包export之外的其他文件,使打包的文件更小。

相关链接:https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4支持多种形式的模块类型,但是有时候可能需要加上type进行配合

如果是CommonJS, AMD, ESM三种类型的模块,使用javascript/auto;

如果是EcmaScript modules(.mjs),使用javascript/esm,其他的模块类型将不生效;

如果只有CommonJS和EcmaScript modules不可用,使用javascript/dynamic;

如果是json类型的文件,允许使用require和import来导入json,使用json;

如果是Webassembly,使用webassembly/experimental —— 官方说是一个实验性的功能。

举个栗子:

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

7. 支持ES6的方式导入JSON文件,并且可以过滤无用的代码

下面是三种导入json文件的方法:

let jsonData = require('./data.json');

import jsonData from './data.json'

import { first } from './data.json'

其中使用import { first } from './data.json'引入的json文件会忽略没导入的代码,打包时只会将first的打进去。

8. 移除CommonsChunkPlugin,用optimization.splitChunks和optimization.runtimeChunk来代替

这里内容有点多,不做具体介绍,后续可能会出一篇有关optimization.splitChunks的文章,在下面从3.x迁移的时候会有简单介绍,出了上面的新版relesase链接外,下面还推荐几个不错的链接:

RIP CommonsChunkPlugin
medium上的有关移除CommonsChunkPlugin的文章
medium上的有关webpack4更新文章

二、webpack 3.X 迁移到 webpack4.X

1. 更新webpack依赖

npm install -g webpack webpack-cli

npm install --save-dev webpack webpack-cli

2. 更新对应模块

在webpack升级的同时,对应的许多依赖也需要相应的进行升级,下面是在vuec-cli的脚手架中需要的更新;对于其他工程,注意看控制台的报错,是哪个插件报的错就去升级那个插件,如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子:

const webpack = require('webpack');

new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

写在后面

对于webpack的这次升级这里没有一一列举,选了几个相对关键的点,具体可以去看这里;有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟,目前遇到的基本都解决了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS 事件延迟执行说明分析

    JS 事件延迟执行说明分析

    为了避免用户鼠标无意识划过,而触发事件。浪费客户端资源。
    2010-05-05
  • array.prototype.silce.call 理解分析

    array.prototype.silce.call 理解分析

    在很多框架中与遇到这个方法,但一时没去研究这个方法,只要前段时间被问到,尴尬无奈收场。所以学习就要追根究底的精神,废话少说,说正题。
    2010-04-04
  • js 对象是否存在判断

    js 对象是否存在判断

    js 对象是否存在,然后进行下一步的操作。
    2009-07-07
  • Bootstrap风格的WPF样式

    Bootstrap风格的WPF样式

    此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.这篇文章主要介绍了Bootstrap风格的WPF样式的相关资料,需要的朋友参考下
    2016-12-12
  • javascript 数字格式化输出的实现代码

    javascript 数字格式化输出的实现代码

    这篇文章主要是对javascript中数字格式化输出的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • canvas绘制七巧板

    canvas绘制七巧板

    本文主要分享了canvas绘制七巧板的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 浅谈javascript:两种注释,声明变量,定义函数

    浅谈javascript:两种注释,声明变量,定义函数

    下面小编就为大家带来一篇浅谈javascript:两种注释,声明变量,定义函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值的解决方法

    这篇文章主要介绍了IE6-IE9中tbody的innerHTML不能赋值的解决方法,很实用,需要的朋友可以参考下
    2014-09-09
  • JS幻想 读取二进制文件

    JS幻想 读取二进制文件

    如果说让JavaScript读取站点上一文本文件,那不过是个再简单不了的事了;但若说要换成一个二进制的文件,并且是完全静态的读取,那似乎有点天方夜谭了。
    2009-04-04
  • js实现div闪烁原理及实现代码

    js实现div闪烁原理及实现代码

    闪烁的原理是什么呢:其实就一个,display在none与block之间频繁的交替,这样说你明白了么,示例代码如下,希望对大家有所帮助
    2014-06-06

最新评论