vue-cli多頁面應用常遇到的問題

一、TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor

此問題出如今webpack 3中，解決辦法很簡單，將occurenceOrderPlugin改成OccurrenceOrderPlugin便可。

二、ReferenceError: rm is not defined

在build.js中，引入：

require('shelljs/global')

三、WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

- configuration.resolve.extensions[0] should not be empty.
-> A non-empty string

resolve: {
  extensions: ['', '.js', '.jsx']
},
//刪除：'',改成：
resolve: {
  extensions: ['.js', '.jsx']
},

 

四、

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve has an unknown property 'fallback'.

 

五、

ERROR in Entry module not found: Error: Can't resolve 'babel' in '/Users/xxx/ideaProjects/xxx'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'babel-loader' instead of 'babel',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

 

loader不能用簡寫省去 -loader 的形式。所以vue-loader應該使用全拼的形式。 babel-loader也是

六、context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);

^ TypeError: Cannot read property 'invalid' of undefined

一、卸載webpack-dev-middleware ，執行npm uninstall webpack-dev-middleware，使用dev-server自帶的webpack-dev-middleware

二、從新install webpack-dev-server， 執行 npm install webpack-dev-server --save-dev