webpac4k运行webpack ./src/main.js ./dist/tem.js_webpack field 'browser' doesn't contain-CSDN博客

本文链接：https://blog.csdn.net/weixin_44900668/article/details/113784092

本文档描述了在运行webpack命令时遇到的错误及如何解决。错误信息提示未设置'mode'选项，webpack默认为'production'模式，并且无法解析指定的输出文件。解决方法包括在命令行中明确指定'mode'为'development'，或者在webpack配置文件中设置入口和出口。正确命令格式应包含--output-filename和--output-path选项。

摘要由CSDN通过智能技术生成

标题webpac4k运行webpack ./src/main.js ./dist/tem.js

打包的命令格式：webpack 要打包的文件的路径打包好的输出文件的路径

运行webpack .\src\main.js .\dist\bundle.js

提示错误，错误信息如下：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './dist/tem.js' in 'C:\Users\saoli\Desktop\webpack初'
resolve './dist/tem.js' in 'C:\Users\saoli\Desktop\webpack初'
  using description file: C:\Users\saoli\package.json (relative path: ./Desktop/webpack初)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\saoli\package.json (relative path: ./Desktop/webpack初/dist/tem.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\saoli\Desktop\webpack初\dist\tem.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\saoli\Desktop\webpack初\dist\tem.js.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\saoli\Desktop\webpack初\dist\tem.js.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\saoli\Desktop\webpack初\dist\tem.js.wasm doesn't exist
      as directory
        C:\Users\saoli\Desktop\webpack初\dist\tem.js doesn't exist

webpack 5.21.2 compiled with 1 error and 1 warning in 303 ms

解决方法1：

将上面webpack命令改为webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development，解决

–output-filename：设置要打包的文件目录
–output-path：打包文件放置的文件目录
–mode：告诉程序，在当前目录，我是属于开发状态development

解决方法2：

在配置文件中，需要手动指定入口和出口

module.exports = {
     // 在配置文件中，需要手动指定 入口 和 出口
     entry:path.join(__dirname,'./src/main.js'),//入口，表示，要使用 webpack 打包哪个文件
     output:{//输出配置相关的配置
         path:path.join(__dirname,'./dist'),//指定 打包好的文件，输出到哪个目录中去
         filename:'bundle.js' //这是指定 输出的文件的名称
     }
 }

打包的命令格式：webpack 被打包文件名位置路径 --output-filename 打包后的文件名位置路径 --output-path . --mode development