Webpack中@的原理和用法

66 阅读 0 评论 44 点赞

我是靠谱客的博主个性蓝天，最近开发中收集的这篇文章主要介绍Webpack中@的原理和用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在 webpack 中,可以在 webpack.config.js 文件中配置如下命令,使 @ 在代码中表示指定的路径

module.exports = {
resolve: {
alias: {
//在 webpack 中设置代码中 @ 符号表示 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
}

之后在文件中使用的示例:

import msg from '@/msg'
//建议使用 @ 表示src源代码目录 从外往里查找
console.log(msg)

import $ from 'jquery'
//导入样式 (在 webpack 中 一切皆模块 都可以通过 ES6 导入语法进行导入和使用)
import '@/css/index.css'
import '@/css/index.less'
//导入 src/js/test/info.js
import '@/js/test/info.js'
//导入图片 得到图片文件
import logo from '@/images/logo.png'

在js文件中使用 import 引入其他文件的时候,可以使用已经配置好的 @ 符号代表配置的前置路径