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

https://www.imqianduan.com/webpack/29.html

1、webpack.optimize.OccurenceOrderPlugin is not a constructor

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

原因及解决：

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

2、webpack.NoErrorsPlugin is not a constructor

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

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

解决：

resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    },
改成
resolveLoader: {
    modules: [ 'node_modules' ],
},

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

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

resolve: {
        extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],
改成
resolve: {
        extensions: ['*','.js', '.vue', '.less', '.css', '.scss'],,

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

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

compiler.plugin('compilation', function(compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
        hotMiddleware.publish({
            action: 'reload'
        })
        cb && cb()
    })
})
改成
compiler.hooks.thisCompilation.tap('compilation', (compilation) => {
    compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
        hotMiddleware.publish({
            action: 'reload'
        })
        cb && cb()
    })
});