@

@是 webpack 设置的路径别名，设置方法如下，在 resolve 属性中设置 alias 属性，将 src 的绝对路径映射到 @。

  1. const path = require('path');
  2. const webpack = require('webpack');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   devServer: {
  6.     port: 8080,
  7.     open: true,
  8.     compress: true,
  9.     static: './dist',
  10.   },
  11.   entry: {
  12.     index: './src/index.js'
  13.   },
  14.   output:{
  15.     path: path.resolve(__dirname, './dist'),
  16.     filename: '[name].[hash:8].js'
  17.   },
  18.   resolve:{
  19.     alias: {
  20.       '@': path.resolve('src')
  21.     }
  22.   },
  23.   module:{
  24.     rules: [
  25.       {
  26.         test: /\.css$/,
  27.         use:[
  28.           'style-loader',
  29.           { 
  30.             loader:'css-loader',
  31.             options: {
  32.               url: true,
  33.               import: false,
  34.               modules: true,
  35.               sourceMap: true
  36.             }
  37.           }
  38.         ]
  39.       }
  40.     ]
  41.   },
  42.   plugins: [
  43.     new webpack.CleanPlugin(),
  44.     new HtmlWebpackPlugin({
  45.       filename:'index.html',
  46.       inject: 'body',
  47.       template:'./public/index.html'
  48.     })
  49.   ]
  50. }

～

波浪线代表的 node_modules 文件夹。

使用方法

  1. @import url('./other.css');
  2. body {
  3.   background: red;
  4.   background-image: url(@/test.jpeg);
  5.   background-image: url(./test.jpeg);
  6.   background-image: url(~image/test.jpeg);
  7. }
  9. .index {
  10.   color: blue;
  11. }
  13. .orange {
  14.   color: orange;
  15. }

如代码中所示。
@代表了 src 文件夹。
～代表了 node_modules 文件夹，image就是 node_modules 文件夹下的一级目录。