详解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迁移到新版的时候可能还有其他的坑需要慢慢去趟,目前遇到的基本都解决了。

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

(0)

相关推荐

  • webpack@v4升级踩坑(小结)

    之前看到各大公众号都在狂推 webpack 新版发布的相关内容,之前就尝试了升级,由于部分插件的原因,未能成功,现在想必过了这么久已经可以了,今天就来试一下在我的项目中升级会遇到哪些坑. 查阅更新日志 在安装更新之前,先大致浏览了一下更新日志,对大部分用户来说迁移上需要注意的应该就是这些点: 在命令行界面运行打包指令需要安装 webpack-cli : 打包需要指定打包模式 production or development ,在不同模式下会添加不同的默认配置, webpack.DefinePl

  • 详解基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web

  • 记一次webpack3升级webpack4的踩坑经历

    webpack4版本也出了很久了 之前弄过一段时间的升级 后面因为种种原因搁浅了 今天有硬着头皮升级了一波 yeah 还好升级成功了 先贴一波原先webpack3的github配置 ps(我只是一个菜鸡= = webpack的配置很辣鸡 )废话少说 开撸 1 webpack升级到4.0版本并且安装webpack-cli yarn add webpack-cli global<br>yarn add webpack-cli -D 如果不对webpack-cli进行安装的话会报错 如下: The

  • webpack4 升级迁移的实现

    好久不看 webpack已经从 3到4了,其实很早到今年2月份就开始发布 webpack 4 的 beta 版本: 每一次 webpack 的升级都还是建议阅读下 <webpack 4: released today! - Sean T. Larkin>.你需要明白,为什么 webpack又要迭代一个新的里程碑,以及带了什么新的特性: 这里简单总结下: Faster!!! Webpack 在 bundle bundle 的时间会缩短至少 60 个点,最高可以到 98%; (我们似乎可以节省一些

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

    几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等.由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移. 题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式.毕竟之前parcel的0配置确实抢了很多webpack的风头,然后也去弄了一下par

  • 详解Webpack4多页应用打包方案

    前言 学习了 webpack 之后,将自己的博客的前端进行重构,由于自己的博客是多页应用,所以研究了下多页应用的打包方案.在这里把最后配置的成果分享下,不足之处,请指正.(文字不多,全是代码,不是配置教程,所以没有特别详细的写,只是一个参考) 项目地址: https://github.com/Ray-daydayup/MPA-webpack 文件目录结构 项目目录结构 首先先看下我的项目的目录结构 myblog-webpack ├── dist // 打包输出文件夹 ├── src // 源代码

  • 详解Anyscript开发指南绕过typescript类型检查

    目录 前言 场景设定 解决方法 注释忽略 场景用例 类型断言 场景用例 泛型转换 场景用例 总结 前言 随着越来越多的前端项目采用 typescript 来开发,越来越多前端开发者会接触.使用这门语言.它是前端项目工程化的一个重要帮手,结合 vscode 编辑器,给予了前端开发者更严谨.高效的编码体验.但同时,严格的类型检查也会使部分开发者的编码效率有所降低,将时间花费在解决类型冲突.类型不匹配上,从而导致望而却步,迟迟不敢上手. 本文描述了几种绕过 typescript 类型检查的方法,帮助t

  • 详解babel升级到7.X采坑总结

    最近工作比较忙,有一段时间没有写前端玩了.今天试着搭一个项目,发现各种坑,以前用起来非常好的配置文件各种报错.排查后发现原来babel升级了一个大版本,已经到7.X了,这里我总结一下升级过程中踩到的坑. Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core')

  • 详解CentOS升级Python2.6到Python2.7并安装pip

    现在大多数Centos6.x版本的系统python都是2.x,现因开发需求需要安装前端代码的构建工具glue,故必须要做python版本的升级 升级python 系统默认安装的python是2.6.6的,我们需要升级到Python2.7 wget https://www.python.org/ftp/python/2.7.12/Python-2.7.12.tar.xz tar xf Python-2.7.12.tar.xz cd Python-2.7.12 ./configure --enabl

  • 详解JavaScript权威指南之对象

    JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自有的属性外,还可以从一个称为原型的对象继承属性.对象的方法通常是继承的属性.这种"原型式集成"是JavaScript的的核心特征. 1.创建对象 第一种:对象直接量表示法创建对象. 这是最简单的对象创建方式,对象直接量由若干key:value键值对属性组成,属性之间用逗号分隔,整个对象用花

  • 详解从零搭建 vue2 vue-router2 webpack3 工程

    以新手视角,详细介绍各个步骤内容,不深入讲步骤涉及的原理,主要介绍如何操作. 初始化工程 新建工程目录 vue2practice,在目录下执行npm init -y来创建一个 package.json,在 package.json 中先添加以下必备模块: { "name": "vue2-vue-router2-webpack3", "version": "1.0.0", "devDependencies":

  • 详解webpack4多入口、多页面项目构建案例

    趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi

  • 详解项目升级到vue-cli3的正确姿势

    一. 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置 迁移目录 src->src static->public 对比新旧 package.json ,然后 yarn install ,完毕. 然鹅... 运行项目,报错 You are using the runtime-only build of Vue...... : 然后去查了下旧项目的相关字眼文件: 噢,原来是vue-cli3的webpack相关文件都得自己写.于是乎根据官网的指引,在

  • 详解webpack4之splitchunksPlugin代码包分拆

    本文讲解的是最近在做的一个多页面项目,结合webpack4的splitChunks进行代码包分拆的过程 项目框架 项目有home和topic两个入口文件,主要包括: react.mobx.antd作为项目的基本框架, echarts和d3(画图)是项目中部分页面用到比较大的组件库 src下的工作的组件和代码 其他的非公共代码. 两个入口文件都用react-loadable做了异步加载 import Loadable from 'react-loadable'; ... const Loadabl

随机推荐