资讯专栏INFORMATION COLUMN

webpack3 升级 webpack4踩坑记录

马忠志 / 601人阅读

摘要:本篇不包含所有坑,暂时只记录自己踩到的部分坑一安装安装最新版本安装新增依赖这个在中,本身和它的是在同一个包中,中将两个分开管理。我记录下自己更新这个的过程,以下前半部分可以直接跳过。以下记录踩坑过程。

</>复制代码

  1. 本篇不包含所有坑,暂时只记录自己踩到的部分坑
一.安装

安装webpack4最新版本

</>复制代码

  1. npm install --save-dev webpack@4

安装新增依赖 webpack-cli

这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。

</>复制代码

  1. npm install --save-dev webpack-cli
二.运行

执行本地打包以及运行操作

</>复制代码

  1. npm run build:dll
  2. npm run start

记得添加mode

用来告知 webpack 使用相应环境的内置优化

</>复制代码

  1. module.exports = {
  2. mode: "production" //或者 "development"
  3. };

其中遇到的报错:

</>复制代码

  1. 1.Error:webpack.optimize.UglifyJsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.

UglifyJsPlugin是用来对js文件进行压缩

webpack4中UglifyJsPlugin被废除,需要安装新的插件uglifyjs-webpack-plugin进行替换,见官方文档

安装uglifyjs-webpack-plugin

</>复制代码

  1. npm install uglifyjs-webpack-plugin --save-dev

更改 webpack.dll.config.js || webpack.prod.config.js

去除

</>复制代码

  1. - new webpack.optimize.UglifyJsPlugin({
  2. - compress: {
  3. - warnings: false
  4. - },
  5. - mangle: {
  6. - safari10: true,
  7. - },
  8. - output: {
  9. - comments: false,
  10. - ascii_only: true,
  11. - },
  12. - sourceMap: false,
  13. - comments: false
  14. - }),

添加

</>复制代码

  1. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  2. ...
  3. optimization: { //与entry同级
  4. minimizer: [
  5. new UglifyJsPlugin({
  6. uglifyOptions: {
  7. compress: false,
  8. mangle: true,
  9. output: {
  10. comments: false,
  11. },
  12. },
  13. sourceMap: false,
  14. })
  15. ]
  16. },

注意:uglifyjs-webpack-plugin更多的配置请参考详细配置

</>复制代码

  1. 2.Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

CommonsChunkPlugin 主要是用来提取第三方库和公共模块

CommonsChunkPlugin 已被移除,用splitChunks替代,见官方文档

更改webpack.base.config.js

去除

</>复制代码

  1. // new webpack.optimize.CommonsChunkPlugin({
  2. // children: true,
  3. // async: true,
  4. // minChunks: 2,
  5. // }),

添加

</>复制代码

  1. optimization: {
  2. splitChunks: {
  3. chunks: "async",
  4. minChunks: 2,
  5. },
  6. },

注意:splitChunks更多的配置请参考详细配置

</>复制代码

  1. 3.compilation.mainTemplate.applyPluginsWaterfall is not a function

更新html-webpack-plugin到最新版本

</>复制代码

  1. npm install html-webpack-plugin@latest --save-dev

</>复制代码

  1. 4.Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

这个最后解决方式是用mini-css-extract-plugin替代。

我记录下自己更新这个的过程,以下前半部分可以直接跳过。

更新extract-webpack-plugin到最新版本

</>复制代码

  1. npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0

继续报错

</>复制代码

  1. Path variable [contenthash] not implemented in this context: static/css/style.[contenthash].css

在之前版本中我们使用extract-text-webpack-plugin来提取CSS文件,不过在webpack 4.x中则应该使用mini-css-extract-plugin来提取CSS到多带带文件中

更改如下

这是基于webpack 3.0

</>复制代码

  1. const utils = require("./utils")
  2. const ExtractTextPlugin = require("extract-text-webpack-plugin")
  3. module.exports = {
  4. //...
  5. new ExtractTextPlugin({
  6. filename: utils.assetsPath("css/[name].[contenthash:7].css")
  7. })
  8. }

基于webpack 4.0

</>复制代码

  1. const utils = require("./utils")
  2. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  3. module.exports = {
  4. //...
  5. new MiniCssExtractPlugin({
  6. filename: utils.assetsPath("css/[name].[contenthash:7].css")
  7. })
  8. }

css 以及 mini-css-extract-plugin 的 rule配置

</>复制代码

  1. module: {
  2. rules: [
  3. {
  4. test: /.(css|less)$/,
  5. use: [
  6. {
  7. loader: MiniCssExtractPlugin.loader,
  8. },
  9. {
  10. loader: "css-loader",
  11. options: {
  12. modules: true,
  13. importLoaders: 1,
  14. localIdentName: "[local]"
  15. }
  16. },
  17. {
  18. loader: "postcss-loader",
  19. options: {
  20. ident: "postcss",
  21. plugins: () => [
  22. require("postcss-flexbugs-fixes"),
  23. autoprefixer({
  24. browsers: [
  25. ">1%",
  26. "last 4 versions",
  27. "Firefox ESR",
  28. "not ie < 9", // React doesn"t support IE8 anyway
  29. ],
  30. flexbox: "no-2009",
  31. }),
  32. ],
  33. }
  34. },
  35. {
  36. loader: "less-loader",
  37. options: {
  38. modifyVars: theme
  39. }
  40. }
  41. ]
  42. },
  43. ],
  44. },

</>复制代码

  1. 5.TypeError: webpack.optimize.DedupePlugin is not a constructor

DedupePlugin是用来查找相等或近似的模块,避免在最终生成的文件中出现重复的模块

已经被废除,删除即可,见官网

</>复制代码

  1. 6.FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of...

这个是内存溢出了,需要在启动命令中加一个空间 --max_old_space_size=4096

</>复制代码

  1. "scripts": {
  2. "start": "better-npm-run start",
  3. },
  4. "betterScripts": {
  5. "start": {
  6. "command": "node --max_old_space_size=4096 build/server.js",
  7. "env": {
  8. "NODE_ENV": "development",
  9. "DEPLOY_ENV": "",
  10. "PUBLIC_URL": "",
  11. "PORT": "8082"
  12. }
  13. },
  14. }

7.最后还有一个大坑

offline-plugin插件,配置service worker。这个插件的报错同以上UglifyJsPlugin的报错。

只需要更新到最新版本即可。

以下记录踩坑过程。

</>复制代码

  1. Error:webpack.optimize.UglifyJsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.

因此导致我,删了好几次UglifyJsPlugin以及uglifyjs-webpack-plugin相关的所有代码,然后依然报错。

又以为是缓存问题,我重启了vscode,重启了终端,电脑也尝试重启一遍,依然报错。

最后逐行注释代码,运行打包操作,发现是offline-plugin插件的问题。

问题所在:offline-plugin5.0以前的版本会带有webpack.optimize.UglifyJsPlugin操作,最新的应该做了些处理。

详情参考

最后处理方式,更新offline-plugin到最新的版本

</>复制代码

  1. npm install offline-plugin --save-dev
三、新增TypeScript的打包

安装

</>复制代码

  1. npm install --save-dev typescript ts-loader

添加tsconfig.json文件

可以利用ts初始化命令自动添加

</>复制代码

  1. tsc --init

也可以手动新增文件。

其中配置详情如下,具体查阅tsconfig.json配置详情

</>复制代码

  1. {
  2. "compilerOptions": {
  3. "outDir": "./dist/",
  4. "noImplicitAny": true,
  5. "module": "commonjs",
  6. "target": "es5",
  7. "jsx": "react",
  8. "allowJs": true,
  9. "moduleResolution": "node",
  10. "esModuleInterop": true,
  11. "experimentalDecorators": true,
  12. "noUnusedParameters": true,
  13. "noUnusedLocals": true,
  14. },
  15. "module": "ESNext",
  16. "exclude": ["node_modules"]
  17. }

配置 webpack 处理 TypeScript, 主要更改点:

添加rule

添加需要处理的文件后缀,".ts"、".tsx"等

</>复制代码

  1. rules: [
  2. {
  3. test: /.tsx?$/,
  4. use: "ts-loader",
  5. exclude: /node_modules/
  6. }
  7. ]
  8. resolve: {
  9. extensions: [ ".tsx", ".ts", ".js" ]
  10. },

测试文件TestTsLoader.tsx

用来检测是否配置成功,导入相应页面即可测试。实测ok

</>复制代码

  1. import * as React from "react"
  2. interface TsProps {
  3. name: string
  4. company: string
  5. }
  6. export default class TestTsLoader extends React.Component {
  7. render() {
  8. return (
  9. Hello, I am {this.props.name}, I in {this.props.company} now!
  10. )
  11. }
  12. }

参考资料

</>复制代码

  1. 1.https://blog.csdn.net/harsima...
    2.https://www.typescriptlang.or...
    3.https://webpack.docschina.org...
四.再推荐一个npm script命令优化插件 better-npm-run

参考:

</>复制代码

  1. 1.https://www.jianshu.com/p/710...
    2.https://www.npmjs.com/package...

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

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

相关文章

  • 如何优雅的升级webpack4

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

    zhangfaliang 评论0 收藏0
  • webpack4 系列教程: 前言

    摘要:课程地址全部课程地址立即进入课程源码目录截至按照知识点,目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言 本文档已经过时,最近内容请看:https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

    DevWiki 评论0 收藏0
  • webpack4 的开发环境配置说明

    摘要:的开发环境配置说明完整的的配置地址开发环境的搭建,总体而言就比较轻松,因为用户就是开发者们。的做法是在的字段配置类似这样这样配置后,当运行时,在里通过可以取到值以来做判断就可以啦。 webpack4 的开发环境配置说明 完整的webpack4的配置clone地址: https://github.com/ziwei3749/... 开发环境的搭建,总体而言就比较轻松,因为用户就是开发者们...

    fancyLuo 评论0 收藏0
  • webpack4 的生产环境优化

    摘要:的生产环境优化完整配置的可以参考本文主要介绍了生产环境我都做了哪些优化文章的结构如下静态资源路径。分配不同的关于稳定性的坑注意区分整个项目有变动时,变化。而生产环境可以这一项,因为我们不需要在生产环境调试代码。 webpack4 的生产环境优化 webpack4完整配置的可以参考: https://github.com/ziwei3749/... 本文主要介绍了 webpack4 生产...

    bang590 评论0 收藏0
  • webpack4.x升级摘要

    摘要:以为例,编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化,然后为你执行一系列的自动化操作,同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一:前端工程化的发展 很久以前,互联网行业有个职位叫做 软件开发工程师 在那个时代,大家可能...

    levinit 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<