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

問題描述

在使用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-cli是根據終端控制檯的提示安裝的（當時輸入了yes就自動安裝了），所以懷疑是不是這一個點出現了問題，於是重新安裝webpack-cli: js npm i -g webpack-cli 安裝完成後出現了一些warning資訊：

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

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

直接將報錯提示輸入搜尋框，在一篇帖子（http://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的問題的帖子（http://www.jianshu.com/p/826e9c9b9557） 之後，我嘗試將原先[email protected]解除安裝掉，重新安裝[email protected]

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

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