js webpack 配置路径_vue使用webpack配置路径别名

原始的文件引用方式的缺点要拼写一个巨长无比的字符串，而且每引用一次都要拼写一次。

如果这个文件位置变了，我就要把所有引用它的文件都修改一次。

下面介绍一种很优雅的方式，使用webpack的resolve.alias。以下面的目录结构为例：

-src

-components

-navBar.vue

-main.js

复制代码

vue-cli 2.0 中如何使用？

在vue-cli 2.0的工程中，在\build\webpack.base.conf.js文件下找到如下代码

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') }}复制代码

extensions中配置了可以自动解析的文件类型，在引入的时候不必写文件后缀，如在main.js中引用nvaBar组件：

import navBar from './components/navBar'复制代码

这里便可以不写.vue后缀名。

2.alias则代表的是别名。

配置文件中自动将@配置为src的别名，所以我们使用别名引入navBar时可以这么写：import navBar from '@/components/navBar'复制代码

照猫画虎，我们可以将components目录也配置一个别名：

'@components': resolve('src/components')复制代码

那么再次引用组件时就更加的便捷了：

import navBar from '@components/navBar'复制代码

why?

这里我们谈谈原理，有助于了解别名在vue-cli3.0中的使用。

原理很简单：字符串拼接。

我们在刚刚修改的同文件中会找到如下代码

const path=require('path');

function resolve (dir) { return path.join(__dirname, '..', dir)}

复制代码

path是node中的一个模块，这里引用他是处理路径

resolve就是我们刚刚使用的方法，path.join([...paths])会把给定的路径拼接成一个完整的路径，这里的第一个参数__dirname表示当前文件所在目录，'..'则表示上级目录，前两个参数所得到的目录就是build,src所在的那一级目录。第三个参数就是我们所传进的参数，最后得到的结果正好就是我们所指定的那一级目录。resolve('src/components')复制代码

指向的就是components目录。

vue-cli 3.0 中如何使用？

在vue-cli3.0 中不再使用传统的webpack配置文件，而是已经内嵌了webpack的基础配置。同时预留了vue.config.js供开发者对webpack进行自定义配置。这个文件是建在与src同级的目录里。

在这里我们同样先声明path：

const path=require('path');复制代码

js webpack 配置路径_vue使用webpack配置路径别名相关推荐

SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）
SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video. 动态渲染是采用js进行创建dom.添加dom.添加class.style等方式操作dom元素.最终将播放器编译成成一个独 ...
webpack 大法好 ---- 基础概念与配置（1）
再一次见面! Light 还是太太太懒了,距离上一篇没啥营养的文章已经过去好多天.今天为大家介绍介绍 webpack 最基本的概念,以及简单的配置,让你能快速得搭建一个可用的 webpack 开发环境 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
Webpack实战（三）：作为前端你不得不懂的Webpack资源入口和出口的配置
关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置. 如果想 ...
Webpack实战（一）：基础入门-教你轻松搞定Webpack打包工具安装及参数配置
为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...
Vue「一」—— webpack 的基本使用及常用配置
本文为 Vue 学习系列笔记第一篇,将持续更新. 文章目录一.前端工程化什么是前端工程化前端工程化的解决方案二.webpack 的基本使用什么是 webpack 创建列表隔行变色项目在项目 ...
配置nginx直接使用webpack生成的gz压缩文件
配置nginx直接使用webpack生成的gz压缩文件前言:vue cli3的性能优化里面,开启gzip能得到很多的收益.通过webpack插件compression-webpack-plugin可 ...
Webpack 4 教程：从0配置到生产模式
原文链接:Webpack 4 Tutorial: from 0 Conf to Production Mode webpack 4 问世了!除了大幅度的性能提升,而且增加了零配置的默认设置. 目录 w ...
webpack从0到1的配置（二）
阅读本篇博客需要预先阅读webpack从0到1的配置(一). 接着上篇博客讲plugins. 我们希望在打包后的项目里有index.html文件,并且自动引入main.js文件这里需要安装插件htm ...

js webpack 配置路径_vue使用webpack配置路径别名

js webpack 配置路径_vue使用webpack配置路径别名相关推荐

最新文章

热门文章