configureWebpack两种格式配置alias别名

最新推荐文章于 2024-07-22 17:51:36 发布

原创最新推荐文章于 2024-07-22 17:51:36 发布 · 546 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #大数据 #开发语言 #ecmascript

这篇博客探讨了Webpack配置的两种方式：对象形式和函数形式。在对象形式中，展示了如何设置别名 '@assets' 指向 'src/assets' 路径。而在函数形式中，配置会根据生产环境或开发环境进行不同的配置，同样修改了别名 '@asset'。这种灵活性允许开发者根据需求动态调整构建设置。

以对象形式

configureWebpack: {
     resolve: {
       alias: {
         '@assets': resolve('src/assets')
       }
     }
   },

以函数形式

configureWebpack: config => {
    if (isProduction) {
      ...
    } else {
      ...
    }
    //直接修改配置
    config.resolve.alias['@asset'] = resolve('src/assets')
  }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yixiancheng

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

阐述 Vue CLI 如何通过 `chainWebpack` 和 `configureWebpack` 提供强大的 Webpack 配置定制能力，并解释其底层原理。

weixin_41455464的博客

08-02

1213

今天我们深入探讨了 Vue CLI 提供的。

vue.config.js中配置Vue的路径别名的方法

11-20

在官方的vue-cli配置参考中存在一个configureWebpack webpack中有一个配置路径别名的属性 const path = require('path') module.exports = { // 对象和函数都可以，如果要控制开发环境可以选择函数 configureWebpack:{ resolve:{ alias:{ 'assets':path.resolve('./src/assets') } } }

参与评论您还未登录，请先登录后发表或查看评论

webpack配置路径别名（Vue）

m0_46165586的博客

05-15

1121

查看项目中是否存在vue.config.js文件，不存在就在根目录下面创建该文件。

configureWebpack两种格式配置alias别名（亲测有效）

weixin_46115860的博客

10-27

1万+

一、configureWebpack对象形式 configureWebpack:{ resolve: { // 别名配置 alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network',

webpack中alias的配置

LIS606的博客

08-05

1718

对alias配置的目的是为了减少后续引用路径的复杂性。配置的方式为： // 在vue.config.js文件中 const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { configureWebpack: { // provide the app's title in webpack's name field, so t

webpack中alias配置

flym_的博客

11-23

1万+

作用:设置别名是为了让后续引用的地方减少路径的复杂度 vue-cli2.0 在\build\webpack.base.conf.js文件下设置 //例如 src - components - a.vue - router - home - index.vue index.vue 里，正常引用 A 组件： import A from '../../component...

Vue-cli搭建的项目中路径别名的配置

weixin_49154644的博客

12-19

935

使用cli4.x创建的项目也可以进行以下配置。

vue.config.js配置 configureWebpack

07-05

configureWebpack 和 chainWebpack 转换

03-29

`configureWebpack` 和 `chainWebpack` 是 Vue CLI 提供的两种用于自定义 Webpack 配置的方式。两者的主要区别在于修改配置的方法上： - **`configureWebpack`** 通过返回一个对象或者调用函数来直接覆盖或合并 ...

configureWebpack: { name: name, resolve: { alias: { '@': resolve('src') } }, plugins: [ // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件 new CompressionPlugin({ cache: false, // 不启用文件缓存 test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式 filename: '[path][base].gz[query]', // 压缩后的文件名 algorithm: 'gzip', // 使用gzip压缩 minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩 deleteOriginalAssets: false // 压缩后删除原文件 }) ], } vue.config.js配置项的作用

热门推荐

时光隧道

07-12

55万+

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'src': srcPath, 'styles': srcPath+'/styles', 'images':srcPath+'/images', 'config':path.resolve(srcPath,'js/config.js') } },

vue-cli 3.X webpack配置( 主要实现 resolve.alias的配置)

bowen11233的博客

05-17

2万+

近期有新项目开发，使用vue-cli3.7进行项目构建，形式上跟vue-cli2.x 区别还是蛮大的。最主要的就是生成的项目中，进行webpack配置的文件没有了。这是因为在这个版本的cli中，作者将绝大部分相同的webpack配置，已经封装到cli的安装包中。我们可以打开 node_modules/_@vue_cli-service@3.7.0@@vue/cli-service文件夹看一下，...

Webpack学习 —Alias

doiido的专栏

12-11

1967

在Webpack中，alias是一种简单的映射机制，它允许我们将模块名称映射到特定的路径。

webpack-------路径优化alias

小李科技

06-03

332

webpack配置

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

Rain_Ze的博客

04-29

6781

文章目录前言一、首先webpack.config.js是什么？二、别名（alias）的使用总结文献来源前言想到在webpack配置别名是因为最近引入图片样式太繁琐想更简便些，节省代码提示：以下是本篇文章正文内容，下面案例可供参考一、首先webpack.config.js是什么？示例：webpack.config.js 是基于webpack（开源的前端打包工具）的配置文件。二、别名（alias）的使用代码如下（示例）： const path = require('path'); //引入pa

vue项目中vue.config.js中配置webpack详解

wzy_PROTEIN的博客

05-13

6411

vue-cli3以前的版本中把webpack的配置都写在config文件中，可以vue-cli3以上的版本中没有了config目录，可以将配置webpack的文件写在vue.config.js文件里面。是一个可选的配置文件，如果项目的 (和同级的) 根目录中存在这个文件，那么它会被自动加载。你也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

Webpack解析别名

听海边涛声

07-22

403

Webpack解析别名

configureWebpack:

05-10

`configureWebpack` 是一个用于配置 Webpack 的函数，它允许你在 Vue CLI 创建的项目中自定义 Webpack 配置。通过在 `vue.config.js` 文件中导出一个对象，你可以在其中添加 `configureWebpack` 选项，并将其设置为一个接收 `config` 对象的函数。在这个函数中，你可以通过修改 `config` 对象来自定义 Webpack 配置。举个例子： ```javascript module.exports = { configureWebpack: (config) => { // 修改 config 对象 config.module.rules.push({ test: /\.txt$/, use: 'raw-loader' }) } } ``` 上述代码中，我们在 `configureWebpack` 函数中添加了一个新的 Loader，用于处理 `.txt` 文件，并使用 `raw-loader` 将其转换为原始文本。这样的话，我们就可以在 Vue 组件中导入 `.txt` 文件了。