webpack报错处理:The extension in the request is mandatory for it to be fully specified.

Posted 2023-05-26 Malign

完整的报错提示如下:

BREAKING CHANGE: The request \'./module2\' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a \'*.mjs\' file, or a \'*.js\' file where the package.json contains \'"type": "module"\').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

复盘：

错误发生在我使用webpack提供的node接口webpack()方法调用打包时。报错的直接原因是导入模块时没有填写完整的模块后缀，不过webpack本身就支持这种写法，只要你在配置文件中配置resolve.extensions属性指定匹配的后缀即可，我这里实际上配置了但是报错还是发生了。根本原因是我当前的package.json(或离当前文件最近的package.json配置文件)内配置了type=\'module\'属性来支持ecma的导入，如下图所示:

但是这跟webpack打包有什么关系呢，webpack文档是这样说的:

 意思是如果如果启用了该属性，js文件中使用ecma规范导入文件时应该写后缀，看样子webpack默认开启了该属性。

解决方法;

如文档所示，对所有js文件应用，将该属性改为false。点击前往文档

        test: /\\.m?js$/,

        resolve:

          fullySpecified: false, // disable the behaviour

        ,

　　

 

webpack4学习记录运行npm run dev 报错npm ERR! Failed at the webpacktest@1.0.0 dev script.

背景：
package.json文件设置了快捷运行命令，并在’dev’字段里向env.mode字段传递参数’development’，功能是：通过config配置文件，设置webpack mode为development

  "scripts": 
    "webpack": "webpack",
    "dev": "npm run webpack -- --env.mode development"
  ,

webpack.config.js文件里接收参数env并打印：

module.exports = (env)=> 
    console.log(env)
    return 
        mode:env.mode
    

但是这时报错了：

---

原因：
查看了网友解答，原来是webpack和webpack-cli的版本不兼容
当时安装时我默认安装（webpack版本是5.4x.x,webpack-cli是4.7.2）

npm install --save-dev webpack

npm install --save-dev webpack-cli

试了一下，现在的最新版webpack 5.49.0和webpack-cli 4.7.2也是不兼容的

一起安装也不能适配

npm install webpack webpack-cli --save-dev

---

解决：
使用网友提供的兼容对应版本

npm install --save-dev webpack-cli@3.3.5

npm install --save-dev webpack@4.35.0   

问题就解决了，成功打印

如果要安装html-webpack-plugin库，适配的版本是4.4.1

npm install html-webpack-plugin@4.4.1 --save-dev

如果要安装webpack-dev-server，适配的版本是3.11.1

即：

webpack：4.35.0
webpack-cli：3.3.5
webpack-dev-server：3.11.1
html-webpack-plugin：4.4.1

在网上还找到了另外两种组合，保存一下，防止以后需要时找不到（未验证），分别是：

webpack：4.20.2
webpack-cli：3.1.2
webpack-dev-server：3.1.9

和

webpack -v —— "^5.1.3"
webpack-cli -v —— "^3.3.12"
webpack-dev-server -v —— "^3.11.0"