webpack升级踩坑

webpack3.8.1 => webpack4.39.2

1、error:webpack is not a function

fix scripts/start.js
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
=>
const compiler = createCompiler({ webpack, config, appName, urls, useYarn });

2、error: this.htmlWebpackPlugin.getHooks is not a function

fix config/webpack.config.*.js
new InterpolateHtmlPlugin(env.raw),
=>
new InterpolateHtmlPlugin(HtmlWebpackPlugin,env.raw),

3、弃用 ExtractTextPlugin =>为 mini-css-extract-plugin

{
            test: /\.(css|less)$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                },
                {
                    loader: require.resolve('css-loader'),
                    options: {
                      importLoaders: 1,
                      sourceMap: shouldUseSourceMap,
                    },
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                      // Necessary for external CSS imports to work
                      // https://github.com/facebookincubator/create-react-app/issues/2677
                      ident: 'postcss',
                      plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        autoprefixer({
                          browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                        }),
                      ],
                    },
                },
                {
                    loader: require.resolve('less-loader'),
                    options: {
                        modifyVars: antdtheme,
                        javascriptEnabled: true
                    },
                },
            ]
          },

4、error: Chunk.initial was removed. Use canBeInitial/isOnlyInitial() at Chunk.get initial

解决方法:升级 "webpack-manifest-plugin": "^1.3.2" 到 "webpack-manifest-plugin": "^2.0.4"

5、warning:Tapable.plugin is deprecated. Use new API on .hooks instead

此警告信息指出某个loader或plugin使用了废弃的api,但不影响打包编译。
通过获取stracktrace来确定谁发出警告:
process.traceDeprecation = true;

原文地址:https://www.cnblogs.com/hideonbush/p/11415851.html

时间: 2024-10-05 03:10:23

webpack升级踩坑的相关文章

jQuery升级踩坑大全

背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到jQuery 1.9.x或以上版本.前段时间我就主导了这件事情,把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3.jQuery官方也为类似升级工作提供了jQuery Migrate插件. 言归正传. 坑从何处来 jQuery 1.11.3是1.x时代的最后一个版本(作者更新:2016年1月

webpack打包踩坑之TypeError: Cannot read property &#39;bindings&#39; of null

file loader介绍:https://www.webpackjs.com/loaders/file-loader/ babel loader介绍:https://webpack.js.org/loaders/babel-loader/ webpack-dev-server介绍:https://www.webpackjs.com/configuration/dev-server/  ,https://www.jianshu.com/p/73d74445e5c5 今日在学习百度前端学院的一个小

jQuery升级踩坑之路

1.使用了被废弃的jQuery.browser属性 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9. 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是: <!--[if lt IE 9]> <script src='jquer

async语法升级踩坑小记

从今年过完年回来,三月份开始,就一直在做重构相关的事情. 就在今天刚刚上线了最新一次的重构代码,希望高峰期安好,接近半年的Node.js代码重构. 包含从callback+async.waterfall到generator+co,统统升级为了async,还顺带推动了TypeScript在我司的使用. 这些日子也踩了不少坑,也总结了一些小小的优化方案,进行精简后将一些比较关键的点,拿出来分享给大家,希望有同样在做重构的小伙伴们可以绕过这些. 为什么要升级 首先还是要谈谈改代码的理由,毕竟重构肯定是

webpack初学踩坑记

注意事项: 1. webpack不用装在全局环境下,在哪个项目中使用,就安装在该项目下即可 1. 问题一:npm init 初始化一个项目后,添加webpack.config.js文件,在该项目中通过 npm install webpack --save-dev 将npm包安装到该项目下面, 然后在项目的根目录下执行  webpack命令 报下面的错误 原因:虽然项目中安装了webpack但是在项目的根目录下执行  webpack 执行的仍是全局的webpack  因为全局没有安装 webpac

jQuery版本升级踩坑大全

背景 -------------------------------------------------------------------------------- jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到jQuery 1.9.x或以上版本.前段时间我就主导了这件事情,把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3.jQuery官

vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少不了res.render("xx",data)    这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器,给浏览器去解析,渲染模板其实就是做的替换字符串+拼接字符串的活  各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中,然后在通

webpack踩坑之路 (2)——图片的路径与打包

webpack踩坑之路 (2)--图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(ph

webpack踩坑

运行效率 如果项目是多入口配置,在本地开发阶段不需要每次都跑全部的 可以获取到运行命令行参数决定,跑哪些页面,加快速度 process.env.npm_config_argv或者使用yargs这个npm包获取命令行传入的参数 1 2 3 4 5 6 7 var scriptArg = process.env.npm_config_argv && JSON.parse(process.env.npm_config_argv); var targetDir = scriptArg &&