关于Node.js环境下webpack打包出现异常的问题

已于 2022-04-06 12:19:14 修改
阅读量1.2k 收藏
点赞数 1
分类专栏： node.js 文章标签： 前端
于 2022-04-04 19:21:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Morgans/article/details/123958553
版权

当我想把几个js文件进行打包时，出现了如下异常：

No configuration file found and no entry configured via CLI option.

When using the CLI you need to provide at least two arguments: entry and output.

A configuration file could be named 'webpack.config.js' in the current directory.

Use --help to display the CLI options.

Solution：

  • 在打包的两个路径之间敲一个空格

来得晚一些也行
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack打包以及遇到的Configuration file found but no entry configured. Use --help to display the CLI option
qq_46071321的博客
12-30 1527
首先清楚如下文件夹各自的作用： dist文件夹：用于存放之后打包的文件 src文件夹：用于存放我们写的源文件 main.js:项目的入口文件 mathUtils.js:定义一些数学工具函数 index.html:浏览器打开展示的首页html 一、webpack ./src/main.js ./dist/bundle.js 这里main.js为入口函数 打包方式： 二、webpack 1.执行 npm init package.json:通过npm init生成的，npm包管理的文件。
Node.js-利用webpack使传统html项目在node服务器运行并打包的小玩意
08-09
利用webpack使传统html项目在node服务器运行并打包的小玩意
Node.js-上传Webpack打包出来的assets到七牛云
08-09
上传 Webpack 打包出来的 assets 到 七牛云
Node.js-使用webpack搭建基于typescript的node开发环境template
08-10
使用webpack搭建基于typescript的node开发环境template
【node.js】webpack 打包出错相关问题（WARNING in Configuration）
汪小穆的博客
04-14 4246
前言：有许多人webpack安装成功，webpack出现打包失败的问题。一、问题一：4.0以上版本的webpack的问题webpack4.0以上版本的webpack的脚手架webpack-cli已经被被分离出来了，需要另外安装。安装命令：npm install webpack  --g npm install webpack-cli  --g安装成功后如果像上篇文章中那样输入打包命令：webpac...
no configuration file provided: not found
热门推荐
CADN2021的博客
09-22 2万+
docker常见问题
Webpack打包Node.js遇到的一个问题
qq_42501092的博客
05-24 486
webpack 打包 nodejs 时遇到的一个问题
node.js打包失败_与专家讨论Node.js-全部失败
culh2177的博客
08-10 1286
node.js打包失败This morning I hosted another session in our Talk with the Experts series – this time the subject was Node.js and the experts wereDon Nguyen, Giovanni Ferron and Mark Dalgliesh (author, re...
webpack打包时遇到的问题
Lily_miao的博客
12-21 574
最近在项目打包时总是打包不成功，报错如下图所示： 报错原因：是因为nodejs的版本太高不稳，当时用的nodejs的版本是10.6.0。 解决方式： 在网上搜了一下，v8版本的nodejs相对要稳定一些，建议安装8.9.4版本的nodejs，重新安装node环境之后打包就没有报错了。 其他版本的nodejs下载链接：http://nodejs.org/dist/ 解决方式补充： ...
webpack打包报错ERROR in js/app.5997574802e535cd2cca.js from UglifyJs Unexpected token: punc (() [js/app.
风烟
06-27 1930
报错信息 ERROR in js/app.5997574802e535cd2cca.js from UglifyJs Unexpected token: punc (() [js/app.5997574802e535cd2cca.js:45,8] Build failed with errors. 解决方案 增加.babelrc文件 { "presets": [ ...
webpack打包node.js后端项目的方法
11-26
本文介绍了webpack打包node.js后端项目的方法，分享给大家，具体如下： 安装依赖 复制代码 代码如下: npm install –save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-0 webpack配置 ...
解决报错：No configuration file found and no output filename configured via CLI option.
零碎@流年絮语 的博客
01-26 7154
错误分析：无法识别webpack.config.js文件 报错的原因： 第一种情况：webpack.config.js文件所在路径不对 webpack.config.js文件应该在根目录下，而不是在src文件夹中 第二种情况：webpack.config.js文件解析错误 在package.json文件中，找到scripts，查看build的属性值， 例1： "build": "webpack" 上面是代码中的build，对应的工程项目结构如下 例2： "build": "webpack --confi
webpack打包错误：No configuration file found and no output filename configured via CLI option.
小北风的博客
01-25 3414
webpack打包报错：当我将webpack.config.js中的内容进行开发和运行分离后，又将webpack.config.js该文件删除，运行打包报如下错误: No configuration file found and no output filename configured via CLI option. A configuration file could be named ‘webpack.config.js’ in the current directory. 原因是，没有在packag
前端开发记录
qq_25806839的博客
05-31 204
【代码】前端开发记录。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 571
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 636
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
从CSV到数据库(简易)
qq_31856061的博客
05-31 327
需求：客户上传CSV文档，要求CSV文档内容查重/插入/更新相关数据。框架：jdbcTemplate、commons-io、DB：oracle相关依赖：这里本来打算用的2.11.0，无奈正式项目那边用老版本1.3.1，新版本对类型支持和转换好一点。不过无伤大雅。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 747
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
vue 笔记03
m0_47045804的博客
05-30 924
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
使用webpack5从0搭建。 webpack配置分为三个文件webpack.dev.js webpack.common.js webpack.pro.js webpack.dev.js 开发环境配置 webpack.common.js 是公共配置文件 webpack.pro.js 生产环境配置 package.json 配置三个命令 serve 启动 对应配置webpack.dev.js build打包 对应配置webpack.pro.js 要求配置babel，eslint，dev-server, css-loader,scss-loader,post-loader,style-loader,css压缩，JS压缩，file-loader url-loader,clean-webpack-plugin, js多进程打包，
06-06
好的，您的问题是如何使用webpack5从0搭建项目并配置开发环境和生产环境？ 首先，需要安装webpack和webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 然后，我们需要创建三个配置文件：webpack.common.js、webpack.dev.js和webpack.prod.js。 在webpack.common.js中，我们将配置所有环境都需要的共同的部分。例如，我们可以配置entry、output、module和plugins等。示例代码如下： ```javascript const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'], }, { test: /\.(sa|sc|c)ss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], }, { test: /\.(png|svg|jpg|gif|ico)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name: '[name].[contenthash:8].[ext]', outputPath: 'assets/images', }, }, ], }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[contenthash:8].[ext]', outputPath: 'assets/fonts', }, }, ], }, ], }, plugins: [new CleanWebpackPlugin()], }; ``` 在webpack.dev.js中，我们将配置开发环境所需要的部分。例如，我们可以配置devServer、devtool等。示例代码如下： ```javascript const { merge } = require('webpack-merge'); const commonConfig = require('./webpack.common'); module.exports = merge(commonConfig, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', port: 8080, hot: true, open: true, }, optimization: { minimize: false, }, }); ``` 在webpack.prod.js中，我们将配置生产环境所需要的部分。例如，我们可以配置optimization、devtool等。示例代码如下： ```javascript const { merge } = require('webpack-merge'); const commonConfig = require('./webpack.common'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = merge(commonConfig, { mode: 'production', devtool: 'source-map', optimization: { minimize: true, minimizer: [new TerserPlugin()], }, }); ``` 最后，在package.json中配置三个命令： ```json { "scripts": { "serve": "webpack serve --config webpack.dev.js", "build": "webpack --config webpack.prod.js", "test": "echo \"Error: no test specified\" && exit 1" } } ``` 以上是一个基本的webpack5项目的配置过程，其中包含了babel、eslint、dev-server、css-loader、scss-loader、post-loader、style-loader、css压缩，JS压缩，file-loader、url-loader、clean-webpack-plugin、js多进程打包等常用配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

来得晚一些也行

观众老爷，请赏~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值