webpack对CSS使用alias相对路径

问题来源

由于对页面的路由需要一些修改，要对几乎全部的.vue文件添加一个父文件，然后改路由，但是问题来了，没一个页面的文件，资源路径都要改，import还好可以用alias相对路径（例如：vue-cli3中的@）那么还好，但是css（scss,less）的一些引入就烦了，每一个都要改,随后去找了一些文档总结了一下

解决方法

再vue-cli3中添加一个webpack.config.js文件中编辑

      'use strict'
      const path = require('path')

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

      module.exports = {
        context: path.resolve(__dirname, './'),
        resolve: {
          extensions: ['.js', '.vue', '.json', '.scss'],
          alias: {
            '@': resolve('src')
          }
        }
      }

那么我们再自己的.vue文件中就可以对资源引用使用@了但是要再@前面加~

例子

 css module 中： @import "~@/style/theme"
 css 属性中： background: url("~@/assets/xxx.jpg")
 html 标签中： <img src="~@/assets/xxx.jpg" alt="alias">

原因

原因是 css 文件会被用 css-loader 处理，这里 css @import 后的字符串会被 css-loader 视为绝对路径解析，因为我们并没有添加 css-loader 的 alias，所以会报找不到 @ 目录

1. 加~ Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样 @ 的 alias 配置就能生效了
2. 直接为 css-loader 添加 ailas 的路径，但是在 vue-webpack 给的模板中，单独针对这个插件添加配置就显得麻烦冗余了

总结

对上面代码进行解析，因为我对webpack了解层度几乎为0，所以很有兴趣的去把上面代码为什么要那样写去学习了一下

一：'use strict' 

严格模式

二：path :

它是一个 Node.js 核心模块，用于操作文件路径

三：

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

因为 webpack 期望获得多个配置选项的绝对路径（如 __dirname + '/app/folder'），所以 Windows 的路径分隔符 \ 可能会破坏某些功能。

使用正确的分隔符。即 path.resolve(__dirname, 'app/folder') 或 path.join(__dirname, 'app', 'folder') 

例如下文

context变成了././ （其实././两的当前层级是没关系的，还是代表本文件的位置）

@变成了: ./src

四： module.exports = {}

    module.exports 调用者通过 require 对模块进行调用时返回的值（默认为一个新对象）

    module.exports = function doSomething() { 做一些操作…… }; 然后用require 把doSomething搞出去

     但是webpack.config.js中可以直接下面的那种写法也就可以推出去了

五：context 

https://webpack.docschina.org/configuration/entry-context/#src/components/Sidebar/Sidebar.jsx

context 基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader

我自己的理解就是我们要require引用这个文件的时候的可以省去的（绝对）路径

六：resolve

https://webpack.docschina.org/configuration/resolve/#src/components/Sidebar/Sidebar.jsx

6.1：.resolve的作用 ：配置模块如何解析。例如，当在 ES2015 中调用 import 'lodash' from xxx，resolve 选项能够对 webpack 查找 'lodash' 的方式去做xxx的修改，

6.1.1：resolve.alias 创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块，那么加上了resolve函数就是./src,其实也就是src文件（再vue-cli3中，如图）

6.1.2： resolve.extensions 自动解析确定的扩展

默认值为:extensions: ['.wasm', '.mjs', '.js', '.json']，这里是可以修改的

哦了，哈哈