webpack文件打包错误异常

在进行webpack打包前我们要确保已完成的工作：

1）安装webpack：推荐全局命令 npm install -g webpack 查看webpack版本 webpack -v

2）此时对文件进行打包可能出现错误，提示脚手架文件错误，因为在webpack4的版本里，CLI被单独分离出来了所以要我们单独安装 执行全局命令 npm install -g webpack-cli 安装完脚手架，按理讲是可以使用webpack命令进行正常打包了。

使用webpack打包文件的一般语法为：（简书上面的webpack入门教程是这样说的）

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

# webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

于是执行打包命令 webpack a.js bundle.js 结果还是出现错误 WARNING in configuration The ‘mode'option has…..

截图如下：

出现这个错误提示并不是我们环境装错了，而是webpack4 更新后对webpack语法进行了更严格的要求

之前的命令被修订为 webpack a.js –output-filename bundle.js ，执行这句命令发现打包成功。 截图如下所示：

到此这篇关于webpack文件打包错误异常的文章就介绍到这了,更多相关webpack打包错误内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 解决uglifyjs-webpack-plugin打包出现报错的问题

    楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-webpack-plugin -D const UglifyJsPlugin = require('uglifyjs-webpack-plugin') configureWebpack: config => { if (isProduction) { config.plugins = config.pl

  • vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

    更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置: if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分,根据目录结构自由调整 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(lo

  • 深入webpack打包原理及loader和plugin的实现

    本文讨论的核心内容如下: webpack 进行打包的基本原理 如何自己实现一个 loader 和 plugin 注: 本文使用的 webpack 版本是 v4.43.0 , webpack-cli 版本是 v3.3.11 , node 版本是 v12.14.1 , npm 版本 v6.13.4 (如果你喜欢 yarn 也是可以的),演示用的 chrome 浏览器版本 81.0.4044.129(正式版本) (64 位) 1. webpack打包基本原理 webpack的一个核心功能就是把我们写的

  • vue打包通过image-webpack-loader插件对图片压缩优化操作

    vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积 step1: npm install image-webpack-loader --save-dev step2: 在build/webpack.base.conf.js中改如下配置 module.exports = { module: { { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // loader: 'url-loa

  • 教你使用webpack打包编译TypeScript代码

    TypeScript打包 webpack整合 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包: TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS: 步骤如下: 初始化项目 进入项目根目录,执行命令 npm init -y,创建package.json文件 下载构建工具 命令如下: npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpac

  • 详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

    第一步: 打包开始之前删除'./dist'目录 rimraf('./dist', () => { constprodConfig = require('../../lib/webpack.prod') webpack(prodConfig, (err, stats) \=> { if (err) { console.log(err) process.exit(2) } console.log(stats.toString({ color:true, modules:false, childre

  • 详解Webpack4多页应用打包方案

    前言 学习了 webpack 之后,将自己的博客的前端进行重构,由于自己的博客是多页应用,所以研究了下多页应用的打包方案.在这里把最后配置的成果分享下,不足之处,请指正.(文字不多,全是代码,不是配置教程,所以没有特别详细的写,只是一个参考) 项目地址: https://github.com/Ray-daydayup/MPA-webpack 文件目录结构 项目目录结构 首先先看下我的项目的目录结构 myblog-webpack ├── dist // 打包输出文件夹 ├── src // 源代码

  • 使用webpack和rollup打包组件库的方法

    使用webpack和rollup打包组件库的方法

    前言 之前做了一个loading的样式组件,为了实现代码的可重用性,将这个小项目打包并且发布在了npm上.在一次次的打包发包过程中经历了一个有一个报错,@buzuosheng/loading这个组件已经到了2.7.0版本,虽然还有一些要调整的地方,但总算是可以用了. webpack和rollup对比 webpack算是使用程序员使用最多的打包工具,面试中往往会问到webpack的相关问题,而rollup被问到的要少很多.导致这种现象的一个原因是,应用开发使用webpack,库开发使用rollup

  • webpack文件打包错误异常

    在进行webpack打包前我们要确保已完成的工作: 1)安装webpack:推荐全局命令 npm install -g webpack 查看webpack版本 webpack -v 2)此时对文件进行打包可能出现错误,提示脚手架文件错误,因为在webpack4的版本里,CLI被单独分离出来了所以要我们单独安装 执行全局命令 npm install -g webpack-cli 安装完脚手架,按理讲是可以使用webpack命令进行正常打包了. 使用webpack打包文件的一般语法为:(简书上面的w

  • 深入理解 webpack 文件打包机制(小结)

    前言 最近在重拾 webpack 一些知识点,希望对前端模块化有更多的理解,以前对 webpack 打包机制有所好奇,没有理解深入,浅尝则止,最近通过对 webpack 打包后的文件进行查阅,对其如何打包 JS 文件有了更深的理解,希望通过这篇文章,能够帮助读者你理解: webpack 单文件如何进行打包? webpack 多文件如何进行代码切割? webpack1 和 webpack2 在文件打包上有什么区别? webpack2 如何做到 tree shaking? webpack3 如何做到

  • webpack 单独打包指定JS文件的方法

    背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPath: './dist/', //输出目录,index.html寻找资源的地址 path: BUILD_PATH, // 打包目录 filen

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 浅谈React + Webpack 构建打包优化

    浅谈React + Webpack 构建打包优化

    本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下: 使用 babel-react-optimize对 React 代码进行优化 检查没有使用的库,去除 import 引用 按需打包所用的类库,比如 lodash . echart 等 lodash 可以采用babel-plugin-lodash进行优化. 需要注意的是 在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

  • java文件下载代码实例（单文件下载和多文件打包下载）

    这篇文章主要介绍了java文件下载代码实例(单文件下载和多文件打包下载),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近项目有需要写文件下载相关代码,这边提交记录下相关代码模块,写的不太好,后期再优化相关代码,有好的建议,可留言,谢谢. 1)单文件下载 public String oneFileDownload(HttpServletRequest request,HttpServletResponse response){ //针对需求需

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'

  • 用asp实现把文件打包成Xml文件包，带解包的ASP工具附下载

    把文件打包成Xml文件包,带解包的ASP工具! 把网站源码全部打包到Xml文件里面,生成 updata.xml 文件,把xml文件上传到空间里面 然后通过 install.asp文件将文件全部释放出来. 就和z-blog的 自动安装包一样的功能呵呵. 代码是落伍的一位兄弟写的,不过代码好像有错误,这个是我参考他的 修改过了,可以正常运行!~~ 此代码可以应用到 asp程序的 自动升级服务上面.具体怎么来实现,欢迎探讨!~~ 就在下面回帖探讨!~~~ 不用设定打包目录版,需要设定打包目录版 这两个

随机推荐