Ignite

升级Webpack4.0.1

2018-03-04

Webpack 4介绍:

Webpack 4 正式版已发布,Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。
当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,
然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。

更新点包括:
  1. Environment
  • 不再支持 Node.js 4
  1. Usage
  • 现在可以在两种模式中选择 (mode or --mode) : 生产模式或开发模式
  1. Syntax
  • import() 总是返回一个命名空间对象。CommonJS 模块被封装到默认导出中
  1. Configuration
  • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生产模式下 默认开启)
  • ModuleConcatenationPlugin -> optimization.concatenateModules (开发模式下默认开启)
  • NamedModulesPlugin -> optimization.namedModules (开发模式下默认开启)
  • CommonsChunkPlugin 已被移 除 -> optimization.splitChunks, optimization.runtimeChun
  1. JSON
  • webpack 现在能原生地处理 JSON
  • 允许通过 ESM 语法导入 JSON
  1. Optimization
  • 更新 uglifyjs-webpack-plugin 至 v1 版本,以支持 ES15

注: 详细更新请看 webpack更新日志

升级过程如下:

  1. 首先卸载原来的webpack版本,安装最新4.0.1版本
  • 卸载命令npm uninstall webpack -g
  • 安装命令npm install webpack@4.0.1 -g 或者yarn add webpack@4.0.1
  1. 添加optimization,这时会报错: Cannot find module ‘webpack/bin/config-yargs’
  • 需要安装webpack-dev-server
  • 首先卸载npm uninstall webpack-dev-server -g
  • 然后再安装yarn add webpack-dev-server@3.0.1-beta.0
  1. 启动项目 yarn run dev
  • 发现提示需要安装webpack-cli (用来启动webpack)
  • 安装yarn add webpack-cli -D
  1. 然后启动项目你会发现错误信息:...please use config.optimization.splitChunks instead
    错误信息

compilation.mainTemplate.applyPluginsWaterfall is not a function

此时需要,在webpack.config中添加optimization

optimization

运行命令: yarn add webpack-contrib/html-webpack-plugin -D

  1. 然后启动项目会出现编译警告:The mode option has not been set...,
    错误信息
  • 需要在 package.json 里"dev"和"build"添加
    --mode development
    --mode production
  1. yarn run dev 启动项目

参考:

webpack中文文档

以及插件列表

升级效果:

  • 升级前
    升级前
  • 升级后
    升级后
    风控限额项目由原来的webpack3.10.0升级到4.0.1,

打包速度由原来的 41424ms 提升到 36396ms,减少了5秒

Tags: Webpack
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章