Vue: Webpack 版本安装出现的问题

在安装Webpack的过程中，可能会出现版本冲突，导致出现错误：如npm WARN webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed.You must install peer dependencies yourself.具体参考https://www.cnblogs.com/Smiled/...

东西方集大成者

3471人浏览 · 2019-12-19 14:36:00

东西方集大成者 · 2019-12-19 14:36:00 发布

在安装Webpack的过程中，可能会出现版本冲突，导致出现错误：如

npm WARN webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. 
You must install peer dependencies yourself.

具体参考https://www.cnblogs.com/Smiled/p/9790649.html
如果直接运行下方命令，可能会对之后的webpack-cli和webpack-dev-server出现版本冲突问题

cnpm install webpack -g

以下是我亲测的

1. 安装webpack 3.6.0

$ cnpm install webpack@3.6.0 -g

检查是否安装了：

webpack -v

2. 安装webpack-cli 3.0.0

$ cnpm install webpack-cli@3.0.0 -g

检查是否安装了：

$ webpack-cli -v

3. 安装webpack-dev-server 2.9.1

$ cnpm install webpack-dev-server@2.9.1 -g

检查是否安装了：

$ webpack-dev-server -v

ps: -g表示全局安装，没有带-g则表示只在项目中进行安装。
再次ps: 使用系统层面的全局安装，可能更容易出现各种版本兼容的问题。
在系统控制台运行以上3个步骤的命令后，基本应该没有问题了。

再次试验

发现在VS Code新建一个目录作为项目名，然后在这个目录右键打开控制台，分别依次进行局部安装后，能够成功创建node_modules模块（或者说进行打包），个人觉得比上面的全局安装靠谱

$ cnpm install webpack@3.6.0

$ cnpm install webpack-cli@3.0.0

$ cnpm install webpack-dev-server@2.9.1

自定义的文件打包内容

具体参考:https://www.runoob.com/w3cnote/webpack-tutorial.html
runoob1.js文件:

document.write("It works.");

index.html文件:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

以下运行打包命令：

$ webpack runoob1.js bundle.js

执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：

Hash: 32fd78bf2c63bbbf2d1b
Version: webpack 3.6.0
Time: 32ms

控制台截图：
在这里插入图片描述
目录截图：

node_modules和bundle.js是执行打包命令$ webpack runoob1.js bundle.js后生成的。
以上只是测试方案，望谨慎采纳。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^