BD项目webpack 2.X 生 4.X踩坑指南

升级时间

2019-03-03 ~ 2019-03-04

结果

升级未完成 20190305业务堆积

升级遇到问题汇总

一、旧项目直接升级webpack报错（npm install webpack ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 此部分从网上粘贴，报错大致类似

peerDependencies link ajv@5.5.2 in D:\work-span\travel\Travel\node_modules\_ajv-keywords@2.1.1@ajv-keywords unmet with D:\work-span\travel\Travel\node_modules\ajv(6.6.2)
peerDependencies WARNING webpack-dev-server@^3.1.14 requires a peer of webpack@^4.0.0 but webpack@3.12.0 was installed
peerDependencies WARNING webpack-cli@^3.1.2 requires a peer of webpack@^4.x.x but webpack@3.12.0 was installed
peerDependencies WARNING webpack-dev-server@3.1.14 › webpack-dev-middleware@3.4.0 requires a peer of webpack@^4.0.0 but webpack@3.12.0 was installed
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist 3.0 config used in other tools.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2
could fail on reading Browserslist 3.0 config used in other tools.
deprecate eslint@4.19.1 › file-entry-cache@2.0.0 › flat-cache@1.3.4 › circular-json@^0.3.1 CircularJSON
is in maintenance only, flatted is its successor.
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
Recently updated (since 2018-12-18): 9 packages (detail see file D:\work-span\travel\Travel\node_modules\.recently_updates.txt)
√ All packages installed (928 packages installed from npm registry, used 38s(network 37s), speed 529.19
kB/s, json 802(1.72MB), tarball 17.22MB)

原因：旧系统本身安装了webpack以及其他包依赖，在升级之前需要先卸载或删除，然后升级才能成功，如下:升级后的版本

1
2
npm uninstall webpack
npm install webpack

二、将webpack webpack-cli webpack-server 升级成功后，npm run build 报错

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

webpack4.x 版本与 2.x 区别之一就是webpack.optimize.CommonsChunkPlugin被移除了，原先在项目中的不可用了，需要用新的config.optimization.splitChunks，原先用法如图：

1
2
3
4
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  filename: isBuild ? 'commons-[chunkhash].min.js' : 'commons.js',
})

改进后的用法为:

1
2
3
4
5
6
7
8
9
optimization: {
    splitChunks: {
      name: 'common',
      filename: isBuild ? 'commons-[chunkhash].min.js' : 'commons.js',
    },
    runtimeChunk: {
      name: 'common'
  }
}

三、如上，splitChunks的写法还有问题，报错信息如图:

1
2
3
4
5
6
7
8
9

chunk optimization
	SplitChunksPlugin/Users/nieyuling/space/bd-node/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:740
								throw new Error(
								^
Error: SplitChunksPlugin: You are trying to set a filename for a chunk which
is (also) loaded on demand. The runtime can only handle loading of chunks
which match the chunkFilename schema. Using a custom filename would fail
at runtime. (cache group: vendors)

原因：少写 chunks: ‘initial’,
加后为

1
2
3
4
5
6
7
8
9
10
optimization: {
  splitChunks: {
    chunks: 'initial',
    name: 'common',
    filename: isBuild ? 'commons-[chunkhash].min.js' : 'commons.js',
  },
  runtimeChunk: {
    name: 'common'
  }
}

四、 npm run build 后 html-webpack-plugin-before-html-generation 报错

1
2
3
4
5
6

/Users/nieyuling/space/bd-node/node_modules/add-asset-html-webpack-plugin
/lib/index.js:119
  beforeGenerationHook.tapPromise('AddAssetHtmlPlugin', htmlPluginData =
                          ^
TypeError: Cannot read property 'tapPromise' of undefined

原因： html-webpack-plugin版本有问题，安装稳定版

1
npm install html-webpack-plugin@next

五、webpack提示Cannot read property ‘properties’ of undefined错误

解决办法:
一、将webpack升级到稳定版，如下

1
npm i webpack-cli@next

二、将对应的依赖包卸载再重新装，可能是包老的原因

1
2
npm uninstall
npm install

六、Tapable.plugin is deprecated. Use new API on .hooks instead

原因： 在使用extract-text-webpack-plugin给webpack打包时出现报错，extract-text-webpack-plugin目前版本不支持webpack4。需要将extract-text-webpack-plugin升级到稳定版或者最新版

1
2
npm uninstall extract-text-webpack-plugin
npm install extract-text-webpack-plugin@next

七、htmlWebpackPluginBeforeHtmlGeneration.tapPromise 为undefined

报错版本：

“webpack”: “^4.29.6”,

“html-webpack-plugin”: “^2.28.0”,

需要将html-webpack-plugin升级到最新版或者稳定版

1
2
npm uminstall html-webpack-plugin
npm install html-webpack-plugin@next

八、webpack.config.js配置遇到Error: Cannot find module ‘@babel/core’&&Cannot find module ‘@babel/plugin-transform-react-jsx’ 问题

原因：babel-core 应用 babel-loader的版本用起来须对应上，一般来说，高版本的需要需要同时运用，当时 babel-code的版本为”@babel/core”: “^7.3.4”, 而 “babel-loader”:8.x 两个版本同时运用会出错，需要将”babel-loader”的版本降低:降低后为 “babel-loader”: “^6.2.4”

官方解释：官方默认babel-loader | babel 对应的版本需要一致: 即babel-loader需要搭配最新版本babel

九、cannot find ‘less-loader’

less-loader版本低，需要先卸载less以及less-loader，再install重新安装

十、Cannot read property ‘fileLoader’ of undefined

file-loader版本低，需要先卸载less以及less-loader，再install重新安装

十、less version 3.9.0 is not currently supported

原因: less版本过高，与package内gulp-less版本不搭

做法: less降低版本

1
2
npm uninstall less
npm install less@2.7.0

十一、Cannot read property ‘hash’ of undefined

报错信息意思是htmlWebpackPlugin插件有问题

原因：webpack打包有问题
也就是webpack配置有问题
跟斯腾（同事）请教，可以先只配置报错信息的插件，也就是htmlWebpackPlugin插件，然后一步步注释放开，最后判断问题在插件speed-measure-webpack-plugin上，将其不使用，build正常

十二、build正常，dev-start正常以及dev-server正常，但是本地浏览器访问时，页面空白，没有html渲染

十三、webpack4 一些plugin移除，例如：

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

原因： webpack4基于零配置的思想，部分插件被移除，如webpack.optimize.UglifyJsPlugin在webpack4中已经被移除，在optimization对象中配置optimization.minimize=true即可，如果是生产环境的模式（mode：production）下，则该属性默认为true，默认压缩

十四、webpack4所有都build完毕，本地访问页面空白，打开元素查看dom无html节点元素

原因，将所有打包文件用chunks方式命名，没有触发chunks渲染
解决办法：将打包chunks的方式注释，如下：

1
2
3
4
5
6
7
8
9
10
optimization: {
// splitChunks: {
//   chunks: 'all',
//   name: true,
//   // filename: isBuild ? 'common-code-[chunkhash].min.js' : 'common-	code.js',
// },
// runtimeChunk: {
//   name: 'runtime'
// }
}

十五、大部分页面渲染无误，少部分页面渲染有问题，报错信息如下

1
2
3
4
Error: Command failed: /Users/nieyuling/space/bd-node/node_modules/
freemarker.js/fmpp/fmpp /Users/nieyuling/space/bd-node/client/view/pages/admin/
cinema_activity/index.ftl -C /var/folders/bw/16rd988j6_d_1_rz4r0tnvph0000gn/T/
a336def9-848d-4a77-a9e1-1805fd9a8a4e