Vue基于webpack自动装载配置
Vue的自动装载配置是在 @cli/cli-service 包中,配置文件的目录在 lib/config/ 下的文件,css.js 文件是配置样式的处理,先从这里开始了解把
CSS配置流程

对应着这个配置项
css.loaderOptions
Type: Object
Default: {}
向 CSS 相关的 loader 传递选项。例如:
module.exports = {
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
}
}
看我debug的截图,左边是程序Debug这个常量的值,右边是 vue.config.js 文件的配置项,abc这个属性是我Debug自定义的,不用在意


定位代码52行,(我是顺序记录的),这个位置应该是 生成提取压缩最终的样式文件放置的位置,后面显示的是前面变量所代表的值

继续分析


千年疑问的问题
至今我还不知道为什么自己配置 style-loader, css-loader 为什么老是报关键字异常,看来应该是缺少东西吧,

使用 vue-style-loader会报这个异常

使用 style-loader 的话

会报这个异常

请知情之人给予小白答案吧,项目是由 vue create project创建的,非webpack模板项目
Vue基于webpack自动装载配置的更多相关文章
- vue基于webpack说明
1.文件build里的check-versions.js:检查node和npm版本, 此文件里的 (1)require('chalk')引入一个模块,定义输入终端样式 (2) require('sem ...
- Spring核心技术(八)——Spring自动装载的注解
本文针对自动装载的一些注解进行描述. 基于注解的容器配置 @Required注解 @Required注解需要应用到Bean的属性的setter方法上面,如下面的例子: public class Sim ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- 基于Vue 和 webpack的项目实现
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- 基于 Webpack 4 搭建 Vue 开发环境
自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- 基于webpack和vue.js搭建开发环境
前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...
- 基于webpack的vue项目路径别名
在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...
- vue 一些webpack的配置详解
最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...
随机推荐
- Zookeeper基础入门
Zookeeper简介 基本概念 Zookeeper是一个开源的分布式协调服务.其设计目标是将那些复杂的容易出错的分布式一致性服务封装起来,以简单的接口提供给用户使用.它是一个典型的分布式数据一致性的 ...
- 如何搭建老板想要的dashborad管理驾驶舱,这篇文章值得一看!
随着企业管理向精细化发展和信息化步伐的加快,企业采集到的市场客户及内部管理数据越来越多.越来越趋向于实时,系统大量的信息给企业带来了一个问题:管理者怎么用这些数据才能掌握企业动态,做出及时关键的决策? ...
- Codeforces Round #726 (Div.2) A-E1 题解
A. Arithmetic Array 题目大意:一串数,求添加多少个非负整数后平均值为1 代码: //CF726A #include<bits/stdc++.h> using names ...
- python初略复习(2)及python相关数据分析模块的介绍
常用模块 Python中的模块在使用的时候统一都是采用的句点符(.) # 就是模块名点方法的形式 import time time.time() import datetime datetime.da ...
- LeetCode-020-有效的括号
有效的括号 题目描述:给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺 ...
- WPF启动屏幕SplashScreen
SplashScreen类为WPF应用程序提供启动屏幕. 方法一:设置图片属性 1. 添加启动图片到项目中 2. 设置图片属性的Build Action为SplashScreen 方法二:编写代码 1 ...
- Visual Studio快捷技能
一.移动光标
- tp5 Redis缓冲的设置与清除
控制器代码: //设置缓冲的方法 public function order() { $word = input('word');//接受搜索值 //题意:将订单数据使用redis进行缓存中,第二次读 ...
- linux 系统 解决php -v查看到版本于phpinfo()打印的版本不一致问题
发现问题的原因: 安装zip扩展后,配置成功,但是使用gitlab合并的时候发生错误,经检查,使用phpinfo打印出来的php版本为7.1,而使用linux度服务器 运行 php -v的版本却是5. ...
- 理解 Events Loop 宏任务微任务
在 JavaScript 中,任务被分为两种,一种宏任务(MacroTask),一种叫微任务(MicroTask). MacroTask(宏任务) script全部代码.setTimeout.setI ...