本文不包含所有坑，暂时只记录我踩过的部分坑1.安装并安装最新版本的webpack4npminstall--save-devwebpack@4安装新的依赖webpack-cli这个在webpack3中，webpack本身和它的CLI在同一个包中，而在webpack4中，两者是分开管理的。npminstall--save-devwebpack-cli2.运行执行本地打包运行操作npmrunbuild:dllnpmrunstart记得加mode告诉webpack使用内置优化module.exports={mode:'生产'//或'开发'};其中遇到的错误：1.Error:webpack.optimize.UglifyJsPluginhasbeenremoved,pleaseuseuseconfig.optimization.minimizeinstead.UglifyJsPluginisusedtocompressjsfilesUglifyJsPlugin在webpack4中被废除，需要安装新的插件uglifyjs-webpack-plugin被替换，看官方文档安装uglifyjs-webpack-pluginnpminstalluglifyjs-webpack-plugin--save-dev更改webpack.dll.config.js||删除webpack.prod.config.js-newwebpack.optimize.UglifyJsPlugin({-compress:{-warnings:false-},-mangle:{-safari10:true,-},-output:{-comments:false,-ascii_only:true,-},-sourceMap:false,-comments:false-}),addconstUglifyJsPlugin=require('uglifyjs-webpack-plugin');...optimization:{//与条目最小化器相同级别:[新的UglifyJsPlugin({uglifyOptions:{compress:false,mangle:true,output:{comments:false,},},sourceMap:false,})]},注：uglifyjs-webpack-plugin的更多配置请参考详细配置2.Error:webpack.optimize.CommonsChunkPluginhasbeenremoved,请改用config.optimization.splitChunks。CommonsChunkPlugin主要用于提取第三方库和公共模块。CommonsChunkPlugin已被移除并被splitChunks取代。看官方文档改webpack.base.config.js去掉//newwebpack.optimize.CommonsChunkPlugin({//children:true,//async:true,//minChunks:2,//}),添加优化：{splitChunks:{chunks:'async',minChunks:2,},},note:splitChunksmore配置请参考详细配置3.compilation.mainTemplate.applyPluginsWaterfallisnotafunction更新html-webpack-插件到最新版本npminstallhtml-webpack-plugin@latest--save-dev4.Chunk.entrypoints:使用Chunks.groupsIterable和filterbyinstanceofEntrypointinstead的最终解决方案是使用mini-css-extract-plugin而不是我把更新这个过程记录下来。下面前半部分可以直接跳过。更新extract-webpack-plugin到最新版本npminstall--save-devextract-text-webpack-plugin@4.0.0-beta.0继续报错Pathvariable[contenthash]notimplementedinthiscontext:static/css/风格。[contenthash].css在之前的版本中，我们使用extract-text-webpack-plugin来提取css文件，但是在webpack4.x中，我们应该使用mini-css-extract-plugin来将css提取到一个单独的文件中，并更改下面是基于webpack3.0constutils=require('./utils')constExtractTextPlugin=require('extract-text-webpack-plugin')module.exports={//...newExtractTextPlugin({filename:utils.assetsPath('css/[name].[contenthash:7].css')})}基于webpack4.0constutils=require('./utils')constMiniCssExtractPlugin=require('mini-css-extract-插件'）模块。exports={//...newMiniCssExtractPlugin({filename:utils.assetsPath('css/[name].[contenthash:7].css')})}css和mini-css-extract-的规则配置模块插件：{规则：[{测试：/\.(css|less)$/，使用：[{加载器：MiniCssExtractPlugin.loader，}，{loader:'css-loader',options:{modules:true,importLoaders:1,localIdentName:'[local]'}},{loader:'postcss-loader',options:{ident:'postcss',plugins:()=>[require('postcss-flexbugs-fixes'),autoprefixer({浏览器:['>1%','last4versions','FirefoxESR','notie<9',//React不无论如何都不支持IE8],flexbox:'no-2009',}),],}},{loader:'less-loader',options:{modifyVars:theme}}]},],},5.TypeError:webpack.optimize.DedupePluginisnotaconstructorDedupePlugin用于查找相同或相似的模块，以避免最终生成的文件中的重复模块已被废除，删除即可，见官网6.FATALERROR:Ineffectivemark-compactsnearheaplimitAllocationfailed-JavaScriptheapoutof...这是内存溢出，需要在启动命令中加一个空格--max_old_space_size=4096"scripts":{"start":"better-npm-runstart",},"betterScripts":{"start":{"command":"node--max_old_space_size=4096build/server.js","env":{"NODE_ENV":"development","DEPLOY_ENV":"","PUBLIC_URL":"","PORT":"8082"}},}7.最后还有一个大坑offline-plugin插件，配置serviceworker插件的报错和上面UglifyJsPlugin的报错是一样的。只需要更新到最新版本即可。下面记录一下踩坑的过程。报错：webpack.optimize.UglifyJs插件已被移除，请使用config.optimization.minimize代替。于是把UglifyJsPlugin和uglifyjs-webpack-plugin相关的代码都删了几次，然后还是报错。以为是缓存问题，于是重启vscode，重启终端，尝试重启电脑，还是报错。最后逐行注释代码，运行打包操作，发现是offline-plugin插件的问题。问题：offline-plugin5.0之前的版本会有webpack.optimize.UglifyJsPlugin运行，最新的应该会做一些处理。详见最后的处理方法，更新offline-plugin到最新版本npminstalloffline-plugin--save-dev3.添加TypeScript包安装npminstall--save-devtypescriptts-loader添加tsconfig.json文件可以使用ts初始化命令自动添加tsc--init，也可以手动添加文件。配置详情如下，详见tsconfig.json配置详情","jsx":"react","allowJs":true,"moduleResolution":"node","esModuleInterop":true,"experimentalDecorators":true,"noUnusedParameters":true,"noUnusedLocals":true,},"module":"ESNext","exclude":["node_modules"]}配置webpack处理TypeScript，主要变化：添加规则添加要处理的文件后缀，'.ts','.tsx'等规则：[{test:/\.tsx?$/,use:'ts-loader',exclude:/node_modules/}]resolve:{extensions:['.tsx','.ts','.js']},测试文件TestTsLoader.tsx用于检测是否配置成功，可以通过导入相应页面进行测试。测量okimport*asReactfrom"react"interfaceTsProps{name:stringcompany:string}exportdefaultclassTestTsLoaderextendsReact.Component你好，我是{this.props.name}，我现在在{this.props.company}！
)}}参考资料1.https://blog.csdn.net/harsima...2.https://www.typescriptlang.或者...3.https://webpack.docschina.org...4.推荐另一个npm脚本命令优化插件better-npm-run参考：1.https://www.jianshu.com/p/710...2.https://www.npmjs.com/package...
