Vue中使用webpack别名的方法

时间: 2018-06-20阅读: 2151标签: webpack

在工作中,我们经常会写出这种代码

@import MHeader from '../../components/m-header/m-header'
@import "../../common/stylus/variable"
@import "../../common/stylus/mixin"

即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径。那么该怎么办呢?


大家都知道,vue中的js可以通过配置webpack别名(alias)来避免一长串的路径引用,即:

// target
import MHeader from 'components/m-header/m-header'

//webpack.base.conf.js
alias: {
    '@': resolve('src'),
    'common': resolve('src/common'),
    'components': resolve('src/components')
}


但是,如果直接把这种方法用在css中,则会报错:

@import "common/stylus/variable"    // error
@import "common/stylus/mixin"       // error

其实,这种方法没有错,只不过webpack对css的处理不同于js。

在js中,webpack对路径进行处理时,自动将没有路径标识(/ ,./,../)的第一个文件夹名当做webpack别名处理。如,第一个文件夹名为components,那么webpack会自动在alias中搜索有没有对应的别名,如果有,则直接替换路径;没有则报错。


在css中,webpack正常情况下,不会对路径进行处理。如果你想让webpack对路径进行处理,那么,可以在路径前标识~,如下:

@import "~common/stylus/variable"
@import "~common/stylus/mixin"

相当于通过添加~表示common是webpack别名而不是表示一个文件夹名。正确使用webapck别名可以大大缩短引入文件的时间。


来源:https://www.cnblogs.com/karthuslorin/archive/2018/06/18/9195570.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/885

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack的optimization.namedModules

optimization.namedModules 这个配置对于调试起来很方便,比如原本生产的一段代码是长这样的:很多奇怪的数字,比如最后几行的 [0,0] 是表示了什么意思?如果配置上namedModules 为true呢

webpack 构建多页面应用初探

如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。

提升webpack构建速度

减少resolve解析;把 loader 应用的文件范围缩小,只在最少数必须的代码模块中去使用必要的 loader;减少 plugin 的消耗,webpack 的 plugin 会在构建的过程中加入其它的工作步骤

webpack3 升级 webpack4踩坑记录

安装webpack4最新版本;这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化

Webpack如何实现一个Loader?

loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或\\\"加载\\\"模块时预处理文件,loader是一个node模块,编写loader时要遵循单一原则,每个loader只做一种\\\"转义\\\"工作

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

用不同语言语法编写webpack配置文件

webpack配置文件默认情况下为webpack.config.js,即用原生js语法书写的配置文件。然而,在我们的项目中,有时候是使用的是其他语言语法进行编程,例如:es6、coffeeScript、typeScript等语言语法。

Webpack模块化原理图解

这时模块a,模板b中的代码都暴露在全局环境中,如果模块a中定义了一个方法del。同学b并不知道,在模块b中也定义了一个方法del。这时便造成了命名冲突的的问题。如图

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!