在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号

import  one from '@/views/one.vue'

  

  那这里的@符号到底表示什么意思呢?

  这其实利用了webpack的  resolve.alias  特性,webpabk.config.js  的配制代码如下,在webpack打包时,会把路径引用中的@符号,转换为相对应的路径。

const path = require("path");
function resolve(dir) {
return path.join(__dirname, '..', dir);
} module.exports = {
resolve: {
extensions: ['*', '.js', '.vue'],
alias:{
'vue$': 'vue/dist/vue.common.js',
'@': resolve('src')  // 通过这里的配置,@符号等同于src
}
}
}

  

  

webpack打包文件中的@符号表示什么意思的更多相关文章

  1. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

  2. 在xml文件中写入&符号时需要对其进行转义

    如:在xml文件中保存这样的测试文件: <?xml version="1.0" encoding="utf-8"?> <datas> & ...

  3. 如何降低Vue.js项目中Webpack打包文件的大小?

    https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from ‘vux/src/ ...

  4. vue+webpack 打包文件 404 页面空白

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...

  5. 解决 webpack 打包文件体积过大

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  6. webpack打包文件解析

    /** * 对于没有代码分割的,webpack会打包生成main.js一个大的自执行函数 * 函数参数是一个对象,键值分别是路径和模块的函数 * 函数内部定义了一些方法,包括__webpack_req ...

  7. mybatis.xml文件中#与$符号的区别以及数学符号的处理

    1.#{}表示一个占位符号,通过#{}可以实现preparedStatement向占位符中设置值,自动进行java类型和jdbc类型转换,#{}可以有效防止sql注入. #{}可以接收简单类型值或po ...

  8. webpack打包文件

    npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...

  9. webpack打包配置中出现的问题

    第一个错误: One CLI for webpack must be installed. These are recommended choices, delivered as separate p ...

随机推荐

  1. 【MySQL】安装及配置

    " 目录 #. 概述 1. 什么是数据(Data) 2. 什么是数据库(DataBase, 简称DB) 3. 什么是数据库管理系统(DataBase Management System) 4 ...

  2. java 如何快速的获取浏览量

    最近公司做了一个类似 于发帖,交友圈一个这样的功能 在如何精确快速的获取用户的浏览量,且及时的更新显示,最初我是这样想,把每条帖子内容浏览量放到reids 里面,但是redis只是用来存零时数据,想想 ...

  3. 洛谷 P1981 表达式求值(模拟)

    嗯... 题目链接:https://www.luogu.org/problem/P1981 这道题其实是数组模拟栈.首先处理乘法:注意从后往前处理,处理后归零.然后把数都加起来即可. AC代码: #i ...

  4. Hadoop之伪分布式安装

    一.Hadoop的安装模式有3种 ①单机模式:不能使用HDFS,只能使用MapReduce,所以单击模式主要用于测试MR程序. ②伪分布式模式:用多个线程模拟真实多台服务器,即模拟真实的完全分布式环境 ...

  5. python基础教程系列1-基础语法

    最近在学习python,主要通过廖雪峰的python教程入门,看看自己能够花多少时间最快入门.通过写博客梳理自己的知识点,强化自己的记忆.总的学习思路是,快速学习一遍教程,然后做一些算法题目实践,再然 ...

  6. DataGrid 獲取 制定 row Col 單元格

    public static class DataGridHelper     {         /// <summary>                  /// Gets the v ...

  7. Xcode创建子工程以及工程依赖

    https://www.jianshu.com/p/f2bc7d155a86 阅读 7858 视频地址 如果文章不详细,点击看操作视频 项目需求:代码抽层,业务逻辑和数据处理要高度抽离,模块化,需要将 ...

  8. BeanUtils学习笔记

    一. 简介 BeanUtils提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行简化操作处理.一个JavaBean通常包含了大量的属性,很多情况下,对JavaB ...

  9. cf--TV Subscriptions (Hard Version)

    time limit per test:2 seconds memory limit per test:256 megabytes input:standard input output:standa ...

  10. 吴裕雄 python 神经网络——TensorFlow 花瓣分类与迁移学习(2)

    import glob import os.path import numpy as np import tensorflow as tf from tensorflow.python.platfor ...