webpack

webpack踩坑整理

second9040

整理一下這次架設webpack從開始到可以真正npm run build之前遇到的所有問題。

主要是因為我一開始webpack.config.js的設定是拿別人的XD 踩了超多坑，謹此紀念(?)

以下問題是我照順序遇到的。

 

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (`NormalModuleFactory`). - configuration.resolve.extensions[0] should be an non-empty string. -> A non-empty string

 
這個是webpack1 2配置不同的問題，
處理方式是把webpack.config.js裡面
module下面的loader改成rules

module: {
　rules: [{
　　test: /\.js$/,
　　loader: 'babel',
　　exclude: /node_modules/
　},
　{
　　test: /\.vue$/,
　　loader: 'vue'
　}
]},

 
 
然後。

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve.extensions[0] should be an non-empty string.
-> A non-empty string"

看起來像是resolve的鍋
所以我把webpack.config.js裡面

resolve: {
extensions: ["", '.js', '.vue'],
改掉，拿掉第一個""，變成

resolve: {
extensions: ['.js', '.vue'],"

 

然後獲得

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 68005a5e4e1d2b9d0076
Version: webpack 4.41.5
Time: 29ms
Built at: 2020-02-03 15:12:20

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve 'babel' in 'C:\Users\admin\Downloads\EasyGaming'
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/migrate/3/#automatic-loader-module-name-extension-removed"

 
看起來是babel的問題，
新增 .babelrc
放到在根目錄下。

{
　"presets: ["es2015"],
　"plugins: ["transform-runtime"]
}

 

然後...

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 68005a5e4e1d2b9d0076
Version: webpack 4.41.5
Time: 29ms
Built at: 2020-02-03 16:44:12

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve 'babel' in 'C:\Users\admin\Downloads\EasyGaming'
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/migrate/3/#automatic-loader-module-name-extension-removed"

 
這個寫得蠻清楚的 改下webpackconfig.js設定

{
　test: /\.js$/,
　loader: 'babel-loader',
　exclude: /node_modules/
}

 

改完之後獲得

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'"

找不到module?? trivago!!(誤)
安裝下!

npm install --save-dev babel-core babel-preset-env

 
然後還是不行...= =
突然發現他報錯的一大錯紅字下面有幾行

babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

 
看不懂。 反正就是好像他要我裝babel7?
但我現在的版本只有6
ok那我們來裝看看7!

npm install --save-dev @babel/core @babel/preset-env

 
參考文章
Cannot find module 'babel-core' #124

 
然後太好了!! 這次...的錯誤訊息不一樣了QAQQQQ...

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\admin\Downloads\EasyGaming\node_modules\babel-preset-es2015\lib\index.js"

 
爬文爬起來= =
看起來應該是babel版本問題。

參考文章
Plugin/Preset files are not allowed to export objects, only functions #8707

 

查看package.json
這兩個應該不可以同時安裝
"@babel/core": "^7.8.4",
"babel-core": "^6.26.3",
 

// 解除安裝
npm un babel-core babel-loader babel-preset-env babel-preset-stage-0

// 重新安裝
npm install -D babel-loader @babel/core @babel/preset-env

 
然後還是沒有用。一樣的問題。
但我發我package.json還是有舊的babel東西，
於是我把沒有@(小老鼠符號)的babel版本都刪光光

npm un babel-loader
npm un babel-plugin-transform-runtime

 
最後package.json中關於babel的部分會長成這樣
(沒有6的版本)

"@babel/core": "^7.8.4",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.6","

關於transform-runtime可以參考這篇文章
@babel/plugin-transform-runtime

 
好的!! 這次的報錯終於不再是巨大的紅色了~

ERROR in ./src/views/app.vue
Module build failed (from ./node_modules/vue/dist/vue.runtime.common.js):
TypeError: this._init is not a function
at Object.Vue (C:\Users\admin\Downloads\EasyGaming\node_modules\vue\dist\vue.runtime.common.dev.js:5065:8)
@ ./src/main.js 2:0-34 6:9-12"

 
一問google發現
又是萬惡的loader問題!!改成這樣

loaders: [{
test: /\.vue$/,
loader: 'vue-loader'
},

 

改完之後獲得了新的錯誤訊息

ERROR in ./src/views/app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
@ ./src/main.js 2:0-34 6:9-12

ERROR in ./src/views/app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./src/main.js 2:0-34 6:9-12

ERROR in ./src/views/app.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\admin\Downloads\EasyGaming\node_modules\@vue\component-compiler-utils\dist\parse.js:14:23)
at Object.module.exports (C:\Users\admin\Downloads\EasyGaming\node_modules\vue-loader\lib\index.js:67:22)
@ ./src/main.js 2:0-34 6:9-12"

 

總之就是...很榮幸的一次性獲得了三個錯誤= =
好喔缺甚麼我就裝甚麼...賭賭看可不可以一個套件滿足三個問題。

npm install --dev vue-template-compiler

 

參考文章
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options. #3

 
事實證明不可以。

這次的錯誤訊息是

ERROR in ./src/views/app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./src/main.js 2:0-34 6:9-12

 

改一下webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
　// ...
　plugins: [
　　new VueLoaderPlugin()
　]
}

然後...
 

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

 
這個看起來很像是某種loader的問題~!!
我是某張png圖片造成的問題，
所以我來裝一下url-loader。
架網站少不了css檔案，css-loader一起安裝。

npm install --save file-loader url-loader
npm install --save style-loader css-loader

 
參考資料
IMAGE: You may need an appropriate loader to handle this file type

 
更新webpack.config.js

module: {
　loaders: [{
　　test: /.jsx?$/,
　　loader: 'babel-loader',
　　exclude: /node_modules/
　}, {
　　test: /\.css$/,
　　loader: "style-loader!css-loader"
　}, {
　　test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
　　loader: 'url-loader?limit=100000'
　}]
},

 
然後然後~
 
終於成功的npm run build了~~~~~~¯◡¯
 
以上就是本次架設webpack遇到的所有問題整理啦。
 

最後來處理一下警告的部分

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/"

 
這個是說沒設定mode，加一行就可以了。

// webpack.congig.js
var config = {
mode: "development", // 加上這行即可，mode除了development，還有production
entry: path.join(__dirname, 'src', 'main'),
output: {
......

 
以上~~希望大家的webpack都能順利的架起來。
 

參考文章
Module build failed: TypeError: this._init is not a function #409