【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】

这篇具有很好参考价值的文章主要介绍了【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题一详情:configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”.BREAKING CHANGE since webpack 5: The devtool option is more strict.

翻译过来的意思:
configuration.devtool配置应该符合 “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”
自 webpack 5 以来的重大更改:devtool 选项更加严格。
【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】,webpack,前端,javascript,vue
就是要把webpack devtool配置换成规定的
可以参考官方文档:https://webpack.js.org/configuration/devtool/

我是在学习阶段,是用于开发,在下面有相关推荐
【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】,webpack,前端,javascript,vue

翻译一下:
【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】,webpack,前端,javascript,vue
虽然他写了这些都可以,但是我最开始写的cheap-module-eval-source-map报错,而且根据错误信息,要符合正则表达式"^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$",
cheap-module-eval-source-map中的eval位置不符合规范,根据正则表达式eval-cheap-module-source-map才符合规范

还有一些其他的也符合,例如eval-cheap-source-map,不同的选项效果不同,运行npm run build产生的文件也不同

我是这样写的,

devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-source-map',
//在生产环境下使用cheap-module-source-map,很多人写了false,官方说可以为none,不知道false是不是none;在开发环境下使用eval-cheap-source-map

isProd在最上方用于判断是否是生产环境

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

最下面有完整的配置

问题二详情options has an unknown property ‘stats’. These properties are valid:object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】,webpack,前端,javascript,vue
原因:版本5以后devServer下面好像没有stats属性了,好像被提到了外层(只是我的猜测,我也没见过以前的版本文档)可以参考官方文档
https://webpack.js.org/configuration/stats/

所以把stats提到外边就能运行,如下:

  stats: 'errors-only', // 打包日志输出输出错误信息/
  devServer: {//启动后
    host: 'localhost', // 主机名
    
    port: 8081,
    open: true//浏览器自动打开
  },

以下是我的具体配置:

目录结构:
【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】,webpack,前端,javascript,vue
webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve (dir) {
  return path.resolve(__dirname, '..', dir)
}

module.exports = {
  // devtool:isProd ? false : 'eval-cheap-module-source-map',
  mode: isProd ? 'production' : 'development', //开发模式:生产模式/开发模式
  entry: {
    app: './src/main.ts'  //程序的主入口目录./src 主入口文件main.ts
  },

  output: {
    path: resolve('dist'),  //把我们打包后的文件放在 dist 目录里面
    filename: '[name].[contenthash:8].js' //包括产生的js文件 app.八位hash值.js
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')] //主要针对src目录中的ts、tsx文件进行编译处理操作
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin({
    }),//会把我们dist目录中以前打包的js清理掉

    new HtmlWebpackPlugin({
      template: './public/index.html'
    })//针对当前public目录中的html进行打包
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },//对.ts,.tsx,.js的扩展名进行处理,就是引入什么文件,不用写他的扩展名

  devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-source-map',//哪一行代码出现错误的提示信息
  // devtool: 'cheap-module-eval-source-map',//哪一行代码出现错误的提示信息
  // devtool: 'hidden-source-map',//哪一行代码出现错误的提示信息
  stats: 'errors-only', // 打包日志输出输出错误信息/
  devServer: {//启动后
    host: 'localhost', // 主机名
    
    port: 8081,
    open: true//浏览器自动打开
  },
}

package.json文章来源地址https://www.toymoban.com/news/detail-612106.html

{
  "name": "06_webpack_ts",
  "version": "1.0.0",
  "description": "",	//自动生成的一堆,不过有些人好像没有生成什么东西,就是 “”
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //在windows下和linux下可以识别的指令不同,这里可以让项目在两个系统下都能正常运行
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "cross-env": "^7.0.3",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.4",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}

到了这里,关于【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Webapck 解决:[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

    其一、报错为: [webpack-cli] Error: Cannot find module \\\'vue-loader/lib/plugin\\\' 中文为: [webpack-cli] 错误:找不到模块“vue-loader/lib/plugin” 其二、问题描述为: 在项目打包的时候 npm run build ,控制台报错,并抛出一个 Cannot find module \\\'vue-loader/lib/plugin\\\' 的问题; 其三、控制台报错的页面显示

    2024年02月02日
    浏览(52)
  • Vue、Vue CLI、Webpack 和 Webpack CLI 的版本兼容对照表

    这些指南只是一些常见的版本兼容性指南。在实际项目中,取决于具体的应用场景和使用的组件库,不同版本之间可能还存在其它的兼容性问题。因此,我们建议使用最新版本的 Vue、Vue CLI、Webpack 和 Webpack CLI 来获得最佳的性能、安全性以及最新的功能和改进。同时,在使用

    2024年02月11日
    浏览(38)
  • Vue CLI webpack 相关

    调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象: 该对象将会被 webpack-merge 合并入最终的 webpack 配置。 警告 有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不

    2023年04月23日
    浏览(26)
  • 基于webpack开发react-cli

    在前面的章节中我们学习了 webpack 的基础配置(五大核心属性),以及一些高级优化配置( source map、Tree Shaking、 HMR、Code Split 等),并且分别开发了 webpack.dev.js (开发环境配置),和 webpack.prod.js (生产环境配置)。 这一章节我们将两个配置合并为一个整体配置,内部差异通过

    2024年02月09日
    浏览(38)
  • 基于webpack开发vue-cli

    一、vue-cli开发 1. 项目整体目录 2. package.json 3. eslintrc.js 这里需要继承vue3的eslint校验规则 4. babel.config.js 这里直接使用 @vue/cli-plugin-babel/preset 预设,这里面已经为我们做好了各种兼容性处理和优化,不用我们在像以前一样还要自己配置 core-js , @babel/plugin-transform-runtime 等优化性

    2024年02月10日
    浏览(42)
  • webpack/vue-cli构建速度和打包体积优化

    webpack-bundle-analyzer 可以生成代码分析报告,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等 npm i -D webpackbar webpack-bundle-analyzer javascript 复制代码 const { BundleAnalyzerPlugin } = require(\\\'webpack-bundle-analyzer\\\'); ​ module.e

    2024年01月19日
    浏览(55)
  • 做法一: vue-cli(webpack)配置开发环境、测试环境、生产环境

            由于开发环境、测试环境、生产环境三者是放在不同的服务器导致请求的接口URL地址不同,所有需要配置根据不同的环境使用不同的服务器地址。 请先简单阅读一下官方文档,了解一下概念 1、根目录创建 .env.development 、 .env.test 、 .env.production 文件(开发、测试、生

    2024年02月07日
    浏览(65)
  • Webstorm+Nodejs+webpack+vue-cli+Git搭建vue环境

    此笔记归纳整理webstorm搭建vue项目,仅作记录使用。   因为版权问题,就不再细说了。   选择nvm的安装路径:   选择node的安装路径:    Win键+R键 ,输入cmd,然后回车,打开命令行界面   进入命令提示符窗口,输入以下命令,显示版本号,则安装成功。   在

    2024年02月15日
    浏览(77)
  • Vue开发过程中那些易混淆的知识点 vue-cli & webpack

    Vue CLI = Vue + 一堆的js插件 Vue CLI是基于 Node.js 开发出来的工具,它是一个官方发布 vue.js 项目脚手架,可以快速搭建 Vue 开发环境以及对应的 webpack 配置,单独编译,单独部署。可以再集成各种第三方插件,扩展出更多的功能 Vue是渐近式框架,你可以用它一个功能,也可以用全

    2023年04月23日
    浏览(48)
  • Vue项目性能分析工具: vue-cli-plugin-webpack-bundle-analyzer

    在优化项目的时候,每次打包后只知道包文件大,却不知道那个文件大,那个文件还有优化的空间,所以,推荐一款工具,只要在项目中安装配置一下,便可以一目了然的呈现出打包后资源所占的比例,接下来上教程: 1. 安装 yarn add vue-cli-plugin-webpack-bundle-analyzer -D // or npm

    2024年03月10日
    浏览(88)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包