【前端錯題集】webpack打包vue專案過程中出現Error: Cannot find module 'webpack/lib/rules/Descripti

語言: CN / TW / HK

問題描述

在使用webpack打包vue專案時,沒有使用webpack預設的配置,而是自己建立了一個webpack.component.js資料夾,用來配置webpack: ```js const { VueLoaderPlugin } = require('vue-loader'); const path = require('path'); const glob = require('glob');

const list = {};

async function makeList(dirPath, list) { const files = glob.sync(${dirPath}/**/index.js); // console.log('files:', files);

for (let file of files) {
    const component = file.split(/[/.]/)[2];
    // console.log('component:', component);
    list[component] = `./${file}`;
}
// console.log(list);

}

makeList('components/lib', list)

module.exports = { entry: list, mode:'development', output: { filename: '[name].umd.js', path: path.resolve(__dirname,'dist'), library: 'mui', libraryTarget: 'umd' },

plugins: [
    new VueLoaderPlugin(),
],
module: {
    rules: [{
        test: /\.vue$/,
        use: [{
            loader: 'vue-loader'
        }]

    }]
}

} 並在`package.json`中添加了`scripts`:json "build:js": "webpack --config ./webpack.component.js" `` 在終端控制檯上輸入npm run build:js進行打包,提示要安裝webpack-cli,於是輸入yes進行安裝。 安裝完成後再次輸入npm run build:js`進行打包,發生報錯:

webpack打包報錯.png

解決方案

因為安裝webpack-cli是根據終端控制檯的提示安裝的(當時輸入了yes就自動安裝了),所以懷疑是不是這一個點出現了問題,於是重新安裝webpack-cli: js npm i -g webpack-cli 安裝完成後出現了一些warning資訊:

安裝webpack-cli的warning.png

webpack未安裝? 怎麼可能。但還是重新安裝了webpack

但問題還是沒解決,報錯和之前一模一樣

直接將報錯提示輸入搜尋框,在一篇帖子(https://blog.csdn.net/kfgauss/article/details/120335600) 中發現了一些有用的提示:

舊版本的laravel中的node_modules,DescriptionDataMatcherRulePlugin被替換成了ObjectMatcherRulePlugin.js。

原帖子中的作者直接使用舊的ObjectMatcherRulePlugin.js替換了新版本中的DescriptionDataMatcherRulePlugin

這種方法我認為不可取,但是版本問題導致的報錯的思路還是可以參考的: 之所以報錯Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'可能是因為webpack的版本太高了,與webpack-cli不匹配

在從網上查閱到一篇關於解決webpack-cli的問題的帖子(https://www.jianshu.com/p/826e9c9b9557) 之後,我嘗試將原先[email protected]解除安裝掉,重新安裝[email protected]

依賴.png

重新打包,還是有報錯,但是原來的問題已經解決了:

打包的模式問題.png

打包的模式的問題, 在原先的配置檔案中新增 js mode:'development', 重新打包,大功告成!

打包成功.png