【前端错题集】webpack打包vue项目过程中出现Error: Cannot find module 'webpack/lib/rules/Descripti

问题描述

在使用webpack打包vue项目时，没有使用webpack默认的配置，而是自己创建了一个webpack.component.js文件夹，用来配置webpack：

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:

    "build:js": "webpack  --config  ./webpack.component.js"

在终端控制台上输入npm run build:js进行打包，提示要安装webpack-cli，于是输入yes进行安装。 安装完成后再次输入npm run build:js进行打包，发生报错：

解决方案

因为安装webpack-cli是根据终端控制台的提示安装的（当时输入了yes就自动安装了），所以怀疑是不是这一个点出现了问题，于是重新安装webpack-cli:

npm i -g webpack-cli

安装完成后出现了一些warning信息：

webpack未安装？ 怎么可能。但还是重新安装了webpack

但问题还是没解决，报错和之前一模一样

直接将报错提示输入搜索框，在一篇帖子（blog.csdn.net/kfgauss/art… 中发现了一些有用的提示：

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

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

这种方法我认为不可取，但是版本问题导致的报错的思路还是可以参考的： 之所以报错Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'可能是因为webpack的版本太高了，与webpack-cli不匹配

在从网上查阅到一篇关于解决webpack-cli的问题的帖子（www.jianshu.com/p/826e9c9b9… 之后，我尝试将原先webpack@5.x.x卸载掉，重新安装webpack@4

重新打包，还是有报错，但是原来的问题已经解决了：

打包的模式的问题， 在原先的配置文件中添加

    mode:'development',

重新打包，大功告成！