Vue基于webpack自动装载配置

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

CSS配置流程

Vue基于webpack自动装载配置

 

 

对应着这个配置项

css.loaderOptions
Type: Object
Default: {}
向 CSS 相关的 loader 传递选项。例如:
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  }
}

看我debug的截图,左边是程序Debug这个常量的值,右边是 vue.config.js 文件的配置项,abc这个属性是我Debug自定义的,不用在意

Vue基于webpack自动装载配置Vue基于webpack自动装载配置

 

 

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

Vue基于webpack自动装载配置

 

 继续分析

 

Vue基于webpack自动装载配置

 

 

Vue基于webpack自动装载配置

 

 

 

千年疑问的问题

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

Vue基于webpack自动装载配置

 

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

Vue基于webpack自动装载配置

 

使用 style-loader 的话

Vue基于webpack自动装载配置

 

 会报这个异常

Vue基于webpack自动装载配置

 

 请知情之人给予小白答案吧,项目是由  vue create project创建的,非webpack模板项目

 

Vue基于webpack自动装载配置

上一篇:网页前端video播放m3u8(HLS)


下一篇:网络安全教程--第一章第1章  Web安全的关键点