配置 webpack 设置根目录|学习笔记

简介: 快速学习配置 webpack 设置根目录

开发者学堂课程【React 入门与实战配置 webpack 设置根目录】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8092


配置 webpack 设置根目录


一、方法

通过 vue-cli 创建项目时,它会导入自己的组件。在导入组件时,代码给出了路径。

import Hello from '@/compements/Hello’

其中,@ 符号表示项目根目录中的 src 这一层目录。通过如下方法可以把 @ 和根目录中的 src 对应起来:

webpack resolve 节点下,与 extensions 平级,书写

alias

Resolve: {

'@'path.join(__dirname’./src')

这样 @ 这个符号,就表示项目根目录中 src 的这一层路径,这样拼接得到的路径是绝对路径。

其中,alias: {//表示别名

如果不配置 @ 符号,用“.“也可以。

import Hello from './components/Hello'

相关文章
|
7天前
|
前端开发 JavaScript Shell
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
|
9天前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
25 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
8天前
|
缓存 资源调度 JavaScript
万字总结webpack实战案例配置
该文章总结了Webpack在实际项目中的配置案例,包括如何配置多页面应用、使用高级插件、优化构建速度及减少输出文件大小等方面的实战经验。
|
23天前
|
前端开发
umi webpack配置图片资源转base64
umi webpack配置图片资源转base64
|
2月前
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
38 0
|
2月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
3月前
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
52 6
|
3月前
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
43 1
|
3月前
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
48 0
|
JavaScript 前端开发
WEBPACK简单学习笔记
WEBPACK简单学习笔记
142 0
WEBPACK简单学习笔记
下一篇
无影云桌面