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()
    })
});