首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我在Linux系统中使用webpack别名的"@“执行"npm run build”

当您在Linux系统中使用webpack别名的“@”执行“npm run build”,这意味着您正在使用webpack构建工具来打包和编译您的前端代码。webpack是一个流行的前端构建工具,它可以将多个模块打包成一个或多个静态资源文件,以便在浏览器中加载和运行。

使用webpack别名的“@”可以帮助您在项目中更方便地引用模块或文件。通过在webpack配置文件中设置别名,您可以将长路径或模块名称映射为更短的别名,从而简化代码中的引用。

在执行“npm run build”之前,您需要确保已经安装了Node.js和npm,并且已经在项目中配置了webpack。接下来,您可以按照以下步骤执行:

  1. 在项目根目录下创建一个webpack配置文件,通常命名为webpack.config.js。
  2. 在webpack配置文件中,使用resolve.alias属性来设置别名。例如,您可以将“@”设置为指向项目的src目录,可以这样配置:
代码语言:txt
复制
const path = require('path');

module.exports = {
  // 其他配置项...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};
  1. 在您的项目代码中,您可以使用“@”来引用src目录中的模块或文件。例如,如果您有一个位于src/components目录下的组件文件,您可以这样引用:
代码语言:txt
复制
import MyComponent from '@/components/MyComponent';

这样,webpack会将“@”解析为项目的src目录,并正确地引用MyComponent组件。

关于webpack的更多信息和详细配置,请参考腾讯云的Webpack产品文档:Webpack产品文档

请注意,以上答案仅针对webpack别名的使用,如果您需要更多关于Linux系统、webpack、前端开发等方面的帮助,请提供更具体的问题或需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

npm有个命令突破我知识认知了

你可能非常熟悉npm run xxx这个命令,每次上线前你都在执行npm run build,甚至你常常在npm i等待摸鱼。 当某一天你同事在你电脑输入了一行命令....../cli.js" } } 官方解释这个bin有点绕,我理解就是,提供一个可执行接口命令,让你可以运行你写包,能关联到当前项目,不管是全局还是局部安装,npm可以通过这个bin别名命令...打开node_modules/ramda,我们能从这个优秀ramda库中发现些什么, 注意scripts scripts配置中有一个"build": "npm run build:es && npm...npm run start时,它与npm start也是等价,实际上当我执行这行命令时本质上执行node index.js,前者相当于一个命令别名,所以你看到ramdascripts上配置了多行命令...run build:mjs",,ramda,这行命令执行了多行配置 npm init生成package.json内部还有其他字段,更多可以参考官方文档pckage.json[3],你已经了解

65220

前端构建工具 webpack 笔记

,即执行webpack ,进行打包 npm run build 3、修改 Webpack 打包出入口 webpack 官方文档:概念 | webpack 中文文档 (docschina.org...【和filename同位置】 3)重新打包观察 注意:只有和入口产生直接/间接引入关系,才会被打包 执行命令,npm run build,最后输出如下图框 4)打包后 js 文件,例子如下...--save-dev 2) webpack.config.js 配置 3)重新打包观察 执行命令,npm run build,最后输出如下图框 4)打包后 html 文件,例子如下【我用了自动换行...}; 4)重新打包观察 执行命令,npm run build,最后输出如下图框【注意,下面是 js 文件】 最后 打包后页面 和 打包前页面 展示 一样 6、webpack 打包 css 代码...,npm run build,因为用了mini-css-extract-plugin,最后,这段代码打包后,输出 css 文件【注意:图片所在文件夹也被打包到 dist 文件夹里面了】 ​

14210

NPM 这 6 个有趣实用知识点,你知道几个?

如果你试图 npm 官方搜索 npm add 这个指令,你会发现这个指令似乎根本不存在,如下图: 那我们平时使用 npm add vue@latest --save 又是什么鬼?...其实,npm add 是 npm install 别名 之一,所以当我执行 npm add 时,对于 npm 来说完完全全等同于执行npm install!...所以 8.x 版本,npm install 之前 add、i 基础上增加了 9 个别名,它们是: in, ins, inst, insta, instal, isnt, isnta, isntal...假如,构建脚本是: npm run build 复制代码 那么你知道如何在执行 npm run build 指令执行之前,做一些特定别的操作,或者执行之后执行一些操作,应该怎么做吗?...答案是定义以下两个脚本: { "scripts": { "prebuild": "",// 这是 build 执行钩子 "postbuild": "" // 这是 build 执行钩子

1.2K40

天天命令输入 npm run xxx,倒底 npm run 做了什么,为什么就能开启一个服务?

但是今天我们重点介绍不是 npm 是什么,而且是基于我们平时开发过程中都会在命令中行输入: //开发阶段 npm run dev 或者 npm run serve // 打包阶段 npm run...02 — 基于webpack打包工具下npm 其实npmwebpack两者没有必然联系,并不是说我npm命令只能运行在webpack。...但是众所周知我们开发Vue项止时候,都少不了和 webpack 和 vite 这样工具打交道。下面我就介绍一下基于webpack打包工具下npm是怎么样运行过程。...03 — 原理分析 我们命令行输入命令: npm run serve 看一下运行成功之后提示信息: 有没有小伙伴想过这样问题:为什么是运行npm run serve命令呢,这些命令在哪里呢,...输入 npm run serve回车, npm会在项目的目录下找到 node_modules文件夹下 .bin目录 把此目录添到系统path环境变量下,执行完之后再把环境变量下目录删除。

1.3K20

npm init @vitejsapp背后,仅是npm CLI冰山一角

考虑到这些,最近我有系统地去学习npm,主要学习方式是利用一些空余时间,结合我之前npm使用经验,从npm官方文档入手去排查一些知识盲点和疑惑。...但是,如果你使用npm install -D vue安装了vue,并且项目中引用了vue依赖,那么 webpack Dependency Graph 也会有vue,最终vue也会体现到构建结果...通常我们会在 scripts 自定义 start 脚本,比如: "start": "npm run dev" 如果没有指定自定义 start 脚本,npm start默认会执行: node server.js...npm run时,我们可以调用一些特殊路径下执行文件或脚本,这些路径包括环境变量PATH定义路径,也包括当前项目node_modules./bin。...写在结尾 当我们习惯了一个工具常用功能时,很少会去想它背后发生了什么,甚至更少会去思考它还有没有其他能力。但是,当你有一定使用经验后,再去深入了解它,你会感叹:“卧槽!

1.8K40

rollup打包入门到实践

rollup在业务基本很少会有接触到,通常在我们业务中大部分接触脚手架,或者自己搭建项目中,我们都是用webpack,无论是vue-cli,还是react-create-app他们都是基于webpack...js是否ok,加深对rollup使用 npm 初始化一个基础package.json npm init -y 局部安装rollup npm i rollup 然后在当前目录下创建一个index.js...当我们简单了解一些rollup知识后,我们尝试打包一个我们自己写工具库试一试 rollup打包一个工具库 很早之前写过一篇关于webpack打包工具库,可以参考这篇文章webpack5构建一个通用组件库...,还有@rollup/plugin-commonjs,这个插件会将内部模块如果有用到cjs会给我们转译成es6,因为浏览器是不识别require这样关键字 当我们运行npm run build时...当我们运行npm run server时,就会打包,并同时打开浏览器 OK了,证明我们打包后js就生效了 总结 了解rollup[2]基础使用,对于工具库来说,rollup打包比起webpack

1.2K10

9、webpack从0到1-devServer初探

讲下解决每次修改文件后需要npm run build重复运行命令打包问题。...git仓库:webpack-demo 1、问题 每次修改完文件内容要编译代码时,需要重复手动运行npm run build就是件很麻烦事情。..." }, ... } 然后我们使用npm run watch命令就可以实现打包,然后当我们修改文件内容,它也会帮我们自动再次打包实时监听。...webpack.config.js,这个插件可以帮助我们本地起一个服务器,devServer有一系列参数可以用来配置这个插件。...当我们把dist目录删除后再执行这个命令,虽然浏览器自动打开也能正常显示,但是不会有新dist文件夹生成了,因为这个插件不会显式重复输出生成dist文件了,而是为了提高效率放到了内存里。

62930

webpack从0到1构建

-01,执行npm init -y npm init -y // 生成一个默认package.json package.json配置scirpt { "scripts": { "...与webpack-cli,执行npm i webpack webpack-cli --save-devwebpack5我们默认新建一个webpack默认配置文件webpack.config.js...目录下新建一个app.js并写入一段js代码 console.log('hello, webpack') 终端执行npm run build,这个命令我package.jsonscript配置...如果不设置,那么就是var,主要有以下几种amd、commonjs2,commonjs,umd 通过以上,我们会发现我们可以用配置不同命令执行打包不同脚本,默认情况下,npm run build执行...js文件,我都要每次执行npm run build这个命令,这就有些繁琐了,而且我本地是安装vsode插件方式帮我打开页面的,这就有点坑了。

1.2K10

Linux命令别名怎么玩?

Linux 系统别名是一种简化命令输入方法,它允许用户为常用命令或命令序列创建简短替代名称。通过定义别名,用户可以提高工作效率并减少输入复杂命令错误率。...例如: alias build='npm install && npm run build' # 执行 npm 安装和构建命令 alias deploy='git pull && npm install...&& npm run build && pm2 restart app' # 执行代码部署操作 通过定义这些别名,你只需输入一个短短别名,就能一次性执行一系列命令,提高了效率和便捷性。...小结 Linux 系统使用别名是一种简化命令输入和提高工作效率方法。通过 alias 命令,你可以定义简短别名,并将其关联到常用命令、命令组合或添加确认操作,以减少输入复杂命令错误率。...别名定义可以在当前会话中生效,也可以通过配置文件设置为永久生效。通过合理使用别名,你可以 Linux 系统更加便捷地进行命令操作。

30520

零基础学习weex(三)weex工程及工具

#webpack配置文件 二、npm 搭建weex环境我们就引入了npm,那时候主要是用作JavaScript包管理工具,此章主要介绍npm script。...npm run & npm run-script 这两命令效果都是一样,都能执行 package.json 文件 scripts 字段下指定任务 &与&&: &表示并行执行(即同时平行执行),例如...test是npm run test简写 npm restart是npm run stop && npm run restart && npm run start简写 参考 三、webpack webpack.../src/components'), # 配置别名 js或者vu可以使用别名,简化导入文件路径 'common': path.resolve(__dirname, '....1、安装 你可以自己使用npm安装:npm install -g eslint 你也可以Weex工程配置, package.json devDependencies加入注释中表明安装依赖,

1.4K20

Vue之VueCLI

所以我们下先打开项目的package.json文件: 可以看到,当我们致执行 npm run build时,是通过node之情js文件,意味着可以直接在终端执行js文件而不需要再通过.html文件和浏览器执行...2.build配置 ​ 创建项目的时候,也需要为项目进行相关配置,而build文件夹下就存放项目相关配置,下面一起来看看相关配置有哪些: **① build.js :**当执行 npm run...这个文件做事情很多,首先会删除原本打包好文件(当我们第二次执行 npm run build 命令时,就会删除第一次执行该命令时文件)然后查找webpack相关配置。...总结上面两点,就是说当执行 npm build命令时就会执行build.js文件,然后删除原有文件,查找webpack相关配置。...文件,发现server是执行项目的,所以我们要通过 npm run server执行项目 最后,提一下cli3main.js函数。

49720

Linux命令别名怎么玩?

Linux 系统别名是一种简化命令输入方法,它允许用户为常用命令或命令序列创建简短替代名称。通过定义别名,用户可以提高工作效率并减少输入复杂命令错误率。...本文将详细介绍 Linux使用别名方法和应用场景。图片1. 别名语法和定义 Linux 上,可以使用 alias 命令来定义和管理别名。...例如:alias build='npm install && npm run build' # 执行 npm 安装和构建命令alias deploy='git pull && npm install...&& npm run build && pm2 restart app' # 执行代码部署操作通过定义这些别名,你只需输入一个短短别名,就能一次性执行一系列命令,提高了效率和便捷性。...别名定义可以在当前会话中生效,也可以通过配置文件设置为永久生效。通过合理使用别名,你可以 Linux 系统更加便捷地进行命令操作。

40700

关于前端大管家package.json,你知道多少

四、脚本配置 1. scripts scripts 是 package.json 内置脚本入口,是 key-value 键值对配置,key 为可运行命令,可以通过 npm run执行命令。...build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js...比如可以该文件这样写: node_modules .vscode build .DS_Store 6. man man 命令是 Linux 帮助指令,通过该指令可以查看 Linux 指令帮助...包可以什么操作系统使用,不能再什么操作系统使用。...如果我们希望开发 npm 包只运行在 linux,为了避免出现不必要异常,建议使用 Windows 系统用户不要安装它,这时就可以使用 os 配置: "os" ["linux"] // 适用操作系统

1.5K20

Electron开发时热加载

所以推荐主进程添加,判断时候是开发环境来实现是否调用创建客户端代码。...运行 使用npm run hot即可运行项目 npm run hot 经测试 修改主进程文件,会自动重启窗体; 修改HTML/CSS文件,会自动刷新页面; gulp+electron-reload...(推荐) 相比直接使用electron-reload,这个增加了监听源代码变化自动webpack功能。...\\node_modules\\.bin\\gulp watch:electron", }, 运行项目 npm run start npm run hot 我们分别运行项目的启动和自动webpack脚本...这样好处 需要热加载时候我们再启动npm run hot 不同逐个添加要更新窗口 当然我们也可以gulp启动electron,可以使用electron-connect或自己实现 自己实现效果不是特别好

3.1K20
领券