webpack.config.js配置别名(alias)

于 2021-04-29 22:37:32 发布
阅读量5.8k 收藏 3
点赞数 1
分类专栏： 前端架构 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rain_Ze/article/details/116278147
版权

文章目录

前言

想到在webpack配置别名是因为最近引入图片样式太繁琐想更简便些，节省代码

提示：以下是本篇文章正文内容，下面案例可供参考

一、首先webpack.config.js是什么？

示例：webpack.config.js 是基于webpack（开源的前端打包工具）的配置文件。

二、别名（alias）的使用

代码如下（示例）：

const path = require('path'); //引入path 要用到他的resolve 方法
最低0.47元/天 解锁文章
Rain_Ze
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css import 使用 webpack 配置的alias 相对路径
m0_37922914的博客
05-15 834
问题背景 webpack中定义alias相信很多人都知道，在引入文件的时候比较方便不需要写冗长的引用地址，在webpack里定义这个： resolve: { alias: { '@': path.resolve(__dirname, 'src/') } } 则引入文件时 @ 则表示src目录 然后在使用import导入css文件时，使用alias`定义的地址简写却出现问题 * -!../../../node_modules/css-loader/dist/
React-Ts项目中配置路径别名@
最新发布
wisuky的博客
06-15 753
react-ts项目配置路径别名
webpack配置alias别名设置
weixin_30889885的博客
07-31 8281
处理import时超长的路径引入 1，在项目根目录下新建alias.config.js文件，加入如下内容 const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve(__dirname, "src"), '_c': pat...
webpack 配置 alias
qq_33051709的博客
07-03 4534
webpack 配置 alias 后很方便，有时有我们项目比较大，比较复杂的时候尤为重要 const path = require('path'); const resolvePath = relativePath => path.resolve(process.cwd(), relativePath); { .... alias: { '@': resolvePath('src'), '@common': '../../common', }, }
webpack配置别名alias
weixin_30436891的博客
01-17 650
在webpack.config.js中，通过设置resolve属性可以配置查找“commonJS／AMD模块”的基路径，也可以设置搜索的模块后缀名，还可以设置别名alias。设置别名可以让后续引用的地方减少路径的复杂度。 一、常规webpack构建的项目 1、目录结构 - src - utils - utils.js - config - ...
[webpack] Webpack 别名
weixin_33946605的博客
04-09 147
存在这样一种情况,有时候项目中,存在一些 公共的组件,通常会抽取出来,放在一个统一的文件夹中. 然后大家就可以再 各个 模块里面 愉快的使用该 组件了. 但是也带来一个坑爹的问题 组件放在 common 文件夹中,但是 引用是在 modules 下的各个模块中引用. 这个时候 引用的方式是这样的 import xxx from ‘../../../common/components/Form...
vue.config.js中配置Vue的路径别名的方法
10-15
Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置，其中包括配置路径别名。以下将详细介绍如何在`vue.config.js`中设置Vue的路径别名。 首先，我们需要在项目的根目录下创建或编辑`...
Vue-cli3项目配置Vue.config.js实战记录
10-18
总结来说，`vue.config.js` 是 Vue CLI 3 中的核心配置文件，它使得开发者能够轻松地自定义 Webpack 配置，以适应各种项目需求。通过理解并熟练使用这些配置选项，你可以优化构建过程，提高开发效率，并确保应用性能...
Vue CLI4 Vue.config.js标准配置(最全注释)
10-15
13. **config.resolve.alias**: 添加路径别名，方便在项目中引用。例如，使用 `@` 指代 `src` 目录，提高代码可读性。 14. **image-webpack-loader**: 如果你想压缩图片，可以使用这个 loader。它会在构建过程中...
webpack4config:webpack4配置
03-27
Webpack 4 的配置文件通常是 `webpack.config.js`，这个文件定义了 Webpack 如何处理项目中的不同类型的文件和依赖。下面我们将深入探讨 Webpack 4 配置中的关键部分： 1. **入口(entry)**：这是 Webpack 开始处理...
vue.js之实战webpack.pdf
02-15
- **配置文件结构**：Webpack 的配置文件是一个 Node.js 模块，通常命名为 `webpack.config.js`，采用 CommonJS 规范编写。配置文件没有固定名称或路径要求，可以通过 `--config` 参数指定。 - **入口文件配置...
jsconfig.json:自动生成jsconfig.json的小型工具，用于vscode工作区配置，具有一些默认值和提取的Webpack路径别名
04-29
为您的vscode工作区自动生成jsconfig.json ，并可选支持自定义绝对路径别名，该别名用于从webpack config resolve alias选项中提取的导入/导出。 快速开始 npx jsconfig.json 默认情况下， jsconfig.json在当前...
webpack-alias:如何使用Webpack别名功能的示例项目
05-05
在 Webpack 配置文件（通常为 `webpack.config.js`）中，我们可以使用 `resolve.alias` 选项来设置别名。这是一个对象，键是别名，值是对应的路径。例如，如果我们经常需要引用一个名为 `src` 的目录，可以这样配置...
让IDE识别webpack的别名alias的实现方法
10-15
首先，Webpack 的别名（alias）配置通常在 `webpack.config.js` 文件中进行，例如： ```javascript module.exports = { // ... resolve: { alias: { '@': path.resolve(__dirname, 'src'), 'utils': path....
Webpack.rar
08-05
6. **配置文件（Config）**：Webpack的默认配置文件是`webpack.config.js`，在这里可以设置入口、输出、加载器、插件等，也可以通过命令行参数覆盖部分配置。 7. **分块（Chunk）**：Webpack 将多个模块组合成一个...
Webpack—配置路径别名
热门推荐
生如夏花 炫至茶靡
04-14 1万+
模块化开发项目中，比如vue和react等，经常需要import不同的js或者css模块到当前目录，那么如果路径比较深的话使用相对路径就比较麻烦，而且在文件迁移的时候，如果在不同的目录下边，又得改变以下引入的路径。所以我们可以使用webpack配置路径别名，在引入的时候我们直接使用这个别名，就可以正确的指向。 我的项目目录如下： 在webpack.config.dev中的resolve下的alia
Webpack 中 css import 使用 alias 相对路径
m_review的博客
05-07 3995
你需要提前知道的 在用 webpack 处理打包时，可以将某一个目录配置一个别名，代码中可以使用与别名的相对路径引用资源。 alias 通道： https://doc.webpack-china.org/configuration/resolve/#resolve-alias 具体使用 在 webpack 中配置： ..., resolve: { ..., ali...
webpack中alias别名配置
黄洪波的博客
12-23 1万+
webpack的alias匹配问题初现在模块开发过程中，我们可能会对可以复用的组件封装成一个可被git管控的模块，并在引用的过程中采用 带版本号的方式引用 ，这就要求我们在webpack.中添加相关alias配置
nextjs项目中完整的webpack.config.js
05-22
在Next.js中，webpack配置已经被封装在内部，非常适合使用默认配置。如果您需要进行自定义，则可以使用`next.config.js`文件进行配置。下面是一个示例`next.config.js`文件，其中包含一些常见的自定义配置选项： ```javascript const withSass = require('@zeit/next-sass') const withCSS = require('@zeit/next-css') const withImages = require('next-images') module.exports = withImages(withCSS(withSass({ webpack: (config, { isServer }) => { // 在客户端和服务器端共享一些模块 config.resolve.alias['@components'] = path.join(__dirname, 'components') config.resolve.alias['@utils'] = path.join(__dirname, 'utils') config.resolve.alias['@services'] = path.join(__dirname, 'services') // 处理 LESS 文件 config.module.rules.push({ test: /\.less$/, use: [ { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }, { loader: 'less-loader', options: { javascriptEnabled: true, sourceMap: true } } ] }) // 处理 SVG 文件 config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] }) // 处理 ESLint config.module.rules.push({ test: /\.(js|jsx)$/, enforce: 'pre', exclude: /node_modules/, loader: 'eslint-loader', options: { emitWarning: isServer ? false : true } }) return config } })))) ``` 这个例子展示了如何使用Next.js提供的自定义配置选项来添加一些常见的功能，例如处理LESS文件、SVG文件、共享模块别名和ESLint。需要安装`@zeit/next-sass`、`@zeit/next-css`和`next-images`依赖。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值