首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

webpack 1.x升级到webpack4.x过程中的各种问题解决

2018年04月16日 发布 阅读(1154) 作者:懒炖

1、webpack.optimize.OccurenceOrderPlugin is not a constructor

  1. D:\project\wx\build\webpack.dev.conf.js:26
  2. new webpack.optimize.OccurenceOrderPlugin(), ^
  3. TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
  4. at Object.(D:\project\wx\build\webpack.dev.conf.js:26:9)
  5. at Module._compile (module.js:652:30)
  6. at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32)
  7. at tryModuleLoad (module.js:505:12)
  8. at Function.Module._load (module.js:497:3)
  9. at Module.require (module.js:596:17)
  10. at require (internal/module.js:11:18)
  11. at Object.(D:\project\wx\build\dev-server.js:8:21)
  12. at Module._compile (module.js:652:30)
原因及解决:

OccurenceOrderPlugin已经重命名为 OccurrenceOrderPlugin(名称上多了一个r.),并已经默认启用,因此配置文件中不再需要写,直接删除就是 参考:[https://www.webpackjs.com/guides/migrating/]

2、webpack.NoErrorsPlugin is not a constructor
  1. D:\project\wx\build\webpack.dev.conf.js:27
  2. new webpack.NoErrorsPlugin(), ^
  3. TypeError: webpack.NoErrorsPlugin is not a constructor
  4. at Object.(D:\project\wx\build\webpack.dev.conf.js:27:9)
  5. at Module._compile (module.js:652:30)
  6. at Object.Module._extensions..js (module.js:663:10)
  7. at Module.load (module.js:565:32)
  8. at tryModuleLoad (module.js:505:12)
  9. at Function.Module._load (module.js:497:3)
  10. at Module.require (module.js:596:17)
  11. at require (internal/module.js:11:18)
  12. at Object.(D:\project\wx\build\dev-server.js:8:21)
  13. at Module._compile (module.js:652:30)

NoErrorsPlugin已经重命名为 NoEmitOnErrorsPlugin 参考:[https://www.webpackjs.com/plugins/no-emit-on-errors-plugin/]

3、configuration.resolveLoader has an unknown property ‘fallback’

  1. - configuration.resolveLoader has an unknown property 'fallback'. These properties are valid:
  2. object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
  3. -> Options for the resolver when resolving loaders
  4. at webpack (D:\project\wx\node_modules\webpack\lib\webpack.js:31:9)
  5. at Object.<anonymous> (D:\project\wx\build\dev-server.js:16:16)
  6. at Module._compile (module.js:652:30)
  7. at Object.Module._extensions..js (module.js:663:10)
  8. at Module.load (module.js:565:32)
  9. at tryModuleLoad (module.js:505:12)
  10. at Function.Module._load (module.js:497:3)
  11. at Function.Module.runMain (module.js:693:10)
  12. at startup (bootstrap_node.js:188:16)
  13. at bootstrap_node.js:609:3

解决:

  1. resolveLoader: {
  2. fallback: [path.join(__dirname, '../node_modules')]
  3. },

改成:

  1. resolveLoader: {
  2. modules: [ 'node_modules' ],
  3. },

参考:https://webpack.js.org/configuration/resolve/#resolveloader

4、configuration.resolve.extensions[0] should not be empty

  1. - configuration.resolve.extensions[0] should not be empty.
  2. -> A non-empty string
  3. at webpack (D:\project\wx\node_modules\webpack\lib\webpack.js:31:9)
  4. at Object.<anonymous> (D:\project\wx\build\dev-server.js:16:16)
  5. at Module._compile (module.js:652:30)
  6. at Object.Module._extensions..js (module.js:663:10)
  7. at Module.load (module.js:565:32)
  8. at tryModuleLoad (module.js:505:12)
  9. at Function.Module._load (module.js:497:3)
  10. at Function.Module.runMain (module.js:693:10)
  11. at startup (bootstrap_node.js:188:16)
  12. at bootstrap_node.js:609:3

webpack4要求数组元素不能为空,若为空的话要用 * 来取代
参考:https://webpack.js.org/configuration/resolve/#resolve-extensions

Using this will override the default array, meaning that webpack will no longer try to resolve modules using the default extensions. For modules that are imported with their extension, e.g. import SomeFile from “./somefile.ext”, to be properly resolved, a string containing “*” must be included in the array.

  1. resolve: {
  2. extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],

改成:

  1. resolve: {
  2. extensions: ['*','.js', '.vue', '.less', '.css', '.scss'],

5、(node:10436) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

只知道是插件报错了,但不知道是哪个插件报错了,还知道跟webpack的hooks有关
最后找到是下面这一段代码有问题

  1. compiler.plugin('compilation', function(compilation) {
  2. compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
  3. hotMiddleware.publish({
  4. action: 'reload'
  5. })
  6. cb && cb()
  7. })
  8. })

改成:

  1. compiler.hooks.thisCompilation.tap('compilation', (compilation) => {
  2. compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
  3. hotMiddleware.publish({
  4. action: 'reload'
  5. })
  6. cb && cb()
  7. })
  8. });

参考:https://webpack.js.org/api/compiler-hooks/#thiscompilation

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •