查看vue-cli搭建项目的webpack默认配置

最新推荐文章于 2024-04-02 08:32:48 发布
最新推荐文章于 2024-04-02 08:32:48 发布
阅读量6k 收藏 2
点赞数 2
分类专栏： 前端技术 文章标签： webpack vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40815009/article/details/121315141
版权

⭐⭐⭐⭐vue-cli对webpack配置进行了抽象，所以不能直接查看，但是vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。
这里的vue-cli版本4.5，webpack版本5.51

vue inspect > webpconfig.js

生成一个webpconfig.js文件

🦁下面来看一下这个文件中有什么配置。
webpconfig.js结构如下

{
   
	mode:'development', //模式
	context:'',
	node:{
   
	},
	output:{
   }, //出口
	resolve:{
   }, //解析
	resolveLoader:{
   },
	mudule:
最低0.47元/天 解锁文章
宛宛心里的月亮
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用vue-cli搭建webpack模板项目
su的博客
08-19 1112
使用vue-cli搭建webpack模板项目 第一步：nodejs下载、安装以及环境配置 1．登录nodejs 官网：https://nodejs.org/en/ ，建议下载推荐版本（红色箭头所指）。 2．安装nodejs 下载下来的msi包一直点击下一步即可。 3．环境配置 新版本都会自动配置环境变量，如果输入node找不到，则可能是环境变量没有配置，需要把node的安装路...
利用vue-cli4构建一个webpack项目
AnMuMuPrincess的博客
12-06 321
利用vue-cli4构建一个webpack项目 执行 vue create demo ，构建项目，demo就是项目的名称，如果想使用vue/cli2的命令，需要配置连接桥，添加如下配置就可以 npm i -g @vue/cli-init 问答模式开启，下面是注意的点： 确认项目名称，注意不能是大写字母开头 Project name demo 是否使用官方路由，一般都会用到 Install vue-router? Yes 选择代码规范，这个可以选没有后续自己配置 Use ESLin
Vue2之webpack篇（一）
申小兮和林小兮的博客宝
12-21 7495
传统开发模式、ES6模块化、CommonJS规范、webpack概念、webpack配置文件、项目管理文件
vuecli项目里面怎么查看webpack配置了什么？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
04-01 1543
用编辑器打开js，我们就能看到配置的东西了。可以自己在文件用一个变量接收这个对象即可。查看生产环境的webpack配置。查看开发环境的webpack配置。
58 vue-cli 以及 webpack 提供的默认的插件, 配置
最新发布
970655147的专栏
04-02 1141
从这里我们可以看到整个处理流程是 外部请求了 “HelloWord.vue?这个名称的生成的具体的方式可以参见 “vue_webpack_split_chunk_strategy.docx” 中的 “npm run serve 中的 app.js 中默认情况下的 chunk 的拆分”这个就是 上下文均没有提供的配置的时候, webpack 为一部分必要的配置提供的一部分默认配置, 这里的上下文指的是 用户传入的 或者 vue-cli 传递给 webpack 的。
查看webpack的默认配置(Vue-cli3之一)
wenbintian的博客
05-28 1404
Vue-cli3之一（查看webpack的默认配置） 在项目当前位置输入以下命令： vue inspect > output.js 比如在以下项目里 则会产生 output.js文件，里面就是webpack的默认配置
Vue、Vue CLI、Webpack 和 Webpack CLI 的版本兼容对照表
qq_24600981的博客
05-23 5429
这些指南只是一些常见的版本兼容性指南。在实际项目中，取决于具体的应用场景和使用的组件库，不同版本之间可能还存在其它的兼容性问题。因此，我们建议使用最新版本的 Vue、Vue CLI、Webpack 和 Webpack CLI 来获得最佳的性能、安全性以及最新的功能和改进。同时，在使用前应该先了解相应版本的官方文档和版本兼容性指南。
Vue项目 成员管理系统 Vue-CLI脚手架构建项目 (1)
不是独角兽的博客
01-05 1310
一、环境搭建 使用vue-cli脚手架,脚手架中单独内置了webpack,不需要单独来装webpack再使用. 1.1 全局安装 Vue-CLI npm install -g @vue/cli 1.2 安装成功后,可以查看版本 vue -V //大写的V 二、创建项目 2.1 用vue创建msm的项目 vue create msm 注意: 使用vue-cli脚手架创建项目的时候,不要着急按回车选择,有些内容需要配置. ​ 第一行 为之前创建项目保留的配置的版本(之前没创
详解vue-cli脚手架中webpack配置方法
10-18
Vue CLI 是 Vue.js 的官方命令行工具，它提供了一种快速搭建 Vue 项目的方式，而 Webpack 是一个模块打包工具，常用于处理前端资源。Vue CLI 自带的配置默认使用了 Webpack，允许开发者根据需求自定义配置。下面将...
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
Vue官方提供了一个强大的脚手架工具——vue-cli，它可以简化项目的初始化过程，帮助开发者快速搭建项目结构。 首先，搭建VueWebpack项目的第一步是确保你已经安装了Node.js环境。Node.js是JavaScript的服务器端运行...
windows下vue-cli及webpack搭建安装环境
08-30
本文将详细介绍如何在 Windows 下搭建 Vue-cli 及 Webpack 环境，并且详细讲解每一步的安装和配置过程。 一、安装 Node.js Node.js 是目前最流行的 JavaScript 运行时环境， Vue-cli 和 Webpack 都依赖于 Node.js ...
详解用vue-cli来搭建vue项目和webpack
08-30
Vue CLI 使用了 Webpack 作为默认的构建工具，Webpack 是一个强大的前端资源模块化管理和打包工具。 在使用 Vue CLI 搭建 Vue 项目时，首先需要全局安装 Vue CLI。这可以通过运行 `sudo npm install vue-cli -g` 来...
【webpack4 vue.config.js配置】
limuzhixing的博客
06-27 669
webpack4 vue.config.js配置
基于脚手架@vue/cli 5.0.8搭建vue3项目教程
ta_huang的博客
04-19 4474
脚手架可以快速的帮我们搭建一个项目，而不需要我们从头开始去配置和引入插件，使用脚手架5.0.8版本创建的项目，局部webpack是5.x版本的，因此所有的配置均需要使用支持5.x版本的插件使用控制台进入到项目存放目录，使用命令vue create demo创建名为demo的项目选择自定义勾选Babel、Router、Vuex、css预处理、eslint等，如果需要ts的也可以勾选选择vue版本3.x选择n，hash模式，然后选择less作为自己的项目预处理语言。
webpack 相关知识梳理
m0_62877814的博客
01-05 2553
webpack相关知识
vue cli修改默认webpack配置
Run_youngman的博客
02-22 4820
vue cli修改默认webpack配置 背景 ​ Vue CLI作为一个Vue的脚手架，帮助我们做了很多工作，比起create-react-app脚手架，丝毫察觉不到有webpack的身影，对于简单的开发工作，我们无需关注如何去修改他的默认配置，但是如果我们想做一些定制化的开发，比如修改一些公共变量或者添加一个插件，其实Vue CLI文档都有介绍，但是说实话为了理解这些东西我查了不少文档，说实...
vue-cli#2.0 webpack 配置分析
meinanqihao的博客
05-14 336
vue-cli#2.0 webpack 配置分析 前言 作为 Vue 的使用者我们对于 vue-cli 都很熟悉，但是对它的 webpack 配置我们可能关注甚少，今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介、安装我们不在这里赘述，对它还不熟悉的同学可以直接访问 vue-cli 查看 目录结构 .
webpack中的url-loader的使用
weixin_44684357的博客
11-11 265
默认情况下 webpack 无法处理 css 文件中的 url() 地址， 不管是 图片 还是 字体库 下载： cnpm i url-loader file-loader -D 如 处理此条路径 test 中匹配图片的类型，[hash:8]表示前面自动生成八位哈希的值，确保名称相同内容不相同的两张图片显示出来不一样（各自显示各自）；limit是给定的值，是指图片的大小 如果小于这个值 图片的名称就会被转换成base64字符串，否则不会转换成base64字符串； 下面的ttf/woff/woff2 等字体
webpack打包运行vue项目后找不到.ttf及.woff文件，或者路径报错
weixin_28898107的博客
06-11 3628
webpack.base.config 文件中 ,有的人可能在utils.js中 修改前： { test: /\.css$/, use: ExtractTextPlugin.extract({ use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘], fallback: ‘style-loader‘ ...
手动配置webpack好还是用vue-cli脚手架好
07-14
选择手动配置 webpack 还是使用 Vue CLI 脚手架，取决于你的项目需求和个人偏好。 手动配置 webpack 可能适合具备一定的 webpack 配置经验和对构建过程的深入了解的开发者。手动配置 webpack 可以提供更高的灵活性和定制性，你可以根据项目的需要进行精确的配置，以满足特定的要求。这种方式适用于复杂的项目或需要进行更多自定义配置的情况。 使用 Vue CLI 脚手架可以快速搭建一个 Vue 项目，并且提供了一些默认的配置和约定，使得开发变得更加简单和高效。Vue CLI 集成了许多常用的工具和插件，可以自动处理大部分的配置工作，让你专注于开发而不是配置。它还提供了一些便捷的命令和功能，如快速创建组件、热重载、自动化测试等，使得开发过程更加便捷。 当你的项目相对简单，不需要过多自定义配置时，使用 Vue CLI 脚手架可以帮助你快速启动和开发项目。而对于复杂的项目或需要更多自定义配置的情况，手动配置 webpack 可能更适合。 综上所述，选择手动配置 webpack 还是使用 Vue CLI 脚手架，取决于你的项目需求、个人技术水平和偏好。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值