module.js:557

? ? throw err;

? ? ^

Error: Cannot find module 'webpack/lib/RuleSet'

? ? at Function.Module._resolveFilename (module.js:555:15)

? ? at Function.Module._load (module.js:482:25)

? ? at Module.require (module.js:604:17)

? ? at require (internal/module.js:11:18)

? ? at Object.<anonymous> (D:\qianduan\study\VUE-SSR-TECH\node_modules\[email protected]@vue-loader\lib\plugin.js:2:17)

? ? at Module._compile (module.js:660:30)

? ? at Object.Module._extensions..js (module.js:671:10)

? ? at Module.load (module.js:573:32)

? ? at tryModuleLoad (module.js:513:12)

? ? at Function.Module._load (module.js:505:3)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] build: `webpack --config webpack.config.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

webpack.config.js內容

const path = require('path')

const VueLoaderPlugin = require('vue-loader')

module.exports = {

entry : path.join(__dirname,'src/index.js'),

output : {

filename: 'bundle.js',

path: path.join(__dirname,'dist')

},

module : {

rules: [

{

// 以vue-load 處理以vue結尾的文件，確保正確輸出js代碼

test: /\.vue$/,

loader: 'vue-loader'

},

{

test:/\.css$/,

// style-loader是將外部css文件注入html文件中，最后將html文件中的css 用css-loader進行解析

use: [

'style-loader',

'css-loader'

]

},

{

test: /\.(gif|jpg|jpeg|png|svg)$/,

use:[

{

loader: 'url-loader',

//將圖片轉化成base64的代碼，直接寫在js內容里而不用生成新的文件，減少http請求

//還可以指定輸出的文件名字，

options: {

limit:1024,

name:'[name]-aaa.[ext]'

}

}

]

}

]

},

plugins: [

new VueLoaderPlugin()

]

}