Webpack 中使用波浪号（~）的优雅实践

背景

在实际开发中，项目中的路径通常会非常繁琐，比如：

const path = require('path');
const resolve = dir => path.join(__dirname, dir);
module.exports = {
  resolve: {
    alias: {
      '@': resolve('src'),
      '@assets': resolve('src/assets'),
      '@components': resolve('src/components'),
      '@views': resolve('src/views'),
    }
  }
}

这种写法对于路径的维护来说非常麻烦，当您需要调整项目结构时，需要修改多个地方的路径，容易出错且效率低下。

Webpack 中波浪号 (~) 的作用

webpack 提供了一个非常实用的功能——波浪号 (~)，它可以帮助我们轻松地简化webpack路径。使用波浪号，您只需在路径的开头加上一个波浪号，webpack 就会自动将其解析为项目的根目录。

例如，如果您想导入一个位于 src 目录下的文件，您可以使用以下路径：

import { Component } from '~src/components/Component.vue';

webpack 会自动将这个路径解析为：

import { Component } from '/path/to/project/src/components/Component.vue';

如何在 webpack 中使用波浪号 (~)

在 webpack 中使用波浪号非常简单，您只需要在路径的开头加上一个波浪号即可。例如：

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@components': path.resolve(__dirname, './src/components'),
      '@views': path.resolve(__dirname, './src/views'),
    }
  }
}

这样，您就可以在项目中使用波浪号来简化路径了。

小结

webpack 中的波浪号 (~) 是一个非常实用的功能，它可以帮助我们轻松地简化 webpack 路径。使用波浪号，您只需在路径的开头加上一个波浪号，webpack 就会自动将其解析为项目的根目录。这对于大型项目或需要频繁调整项目结构的场景非常有用。如果您还没有使用过波浪号，强烈建议您尝试一下，它将极大地提高您的开发效率。