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 引入其他文件的时候,可以使用已经配置好的 @ 符号代表配置的前置路径