怎么在webpack中使用脚手架vue-cli工程

　　介绍

这篇文章给大家介绍怎么在webpack中使用脚手架vue-cli工程,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfile说再见了。

一个完整的工程项目中的webpack的配置远远没有这么简单,随着工程的构建要求的增加,webpack.config.js内的配置项目也会随之增加,webpack还有许许多多的选项提供给我们进行灵活配置,它只是一个构建工具,我们只需要了解在Vue项目中它基本能为我们做到的工作,最小化的配置是如何的就足够了,在以后需要对它进行扩展与优化时,带着问题去查官方文档也是非常容易的事。

<强>●,样式表引用

某些页面或者组件可能具有特定的样式定义,这些样式对于其他页面来说是冗余的,我们只希望这些组件在应用时才自动加载这些特定的样式,此时用webpack我们就能在源代码中加入以下代码来动态加载CSS:

import  Vue 得到& # 39;vue # 39;//,,,省略//,引用指定的样式源文件 　　import  & # 39;。/app/资产/不/dark.less& # 39; 　　export  default  { 　　,//?省略 　　}

此时我们只需要在webpack的配置中加入less-loader,那么webpack在打包的时候就会自动将少转换为CSS,并将CSS的动态代码生成到JS文件中。当Vue组件被加载到页面并实例化后,将在DOM内插入这个特定的行内样式& lt; style>以实现动态样式的应用。

对于*。css文件同样也是适用的,例如导入某个第三方库中必需的样式表:

import  & # 39; uikit/dist/css/组件/tabs.css& # 39;

<强>●,字体的引用

假设在黑暗中。少内加入对自定义字体文件的样式定义:

@font-face  { 　　,,字体类型:& # 39;Darkenstone& # 39;; 　　src才能:url (& # 39;。/Darkenstone.eot& # 39;); 　　src才能:url (& # 39;。/Darkenstone.eot ? # iefix& # 39;),格式(& # 39;embedded-opentype& # 39;), 　　,,url (& # 39;。/Darkenstone.woff2& # 39;),格式(& # 39;woff2& # 39;), 　　,,url (& # 39;。/Darkenstone.woff& # 39;),格式(& # 39;woff # 39;), 　　,,url (& # 39;。/Darkenstone.ttf& # 39;),格式(& # 39;truetype # 39;), 　　,,url (& # 39;。/Darkenstone.svg # Darkenstone& # 39;),格式(& # 39;svg # 39;); 　　,,,粗细:正常,,,, 　　,,,字体样式:正常; 　　} 　　.header { 　　,,显示:flex; 　　,,flex-flow: row  nowrap;} 　　,,,祝辞,h2  { 　　,,,字体:16 pt  & # 39; Darkenstone& # 39;; 　　,,} 　　}

这里.header> h2指定了一个<代码> Darkenstone> @font-face>

如果用了webpack后,我们只是在配置文件内加入了一个url-loader:

{ 　　,,测试:/\。(woff2 ? |测试结束| ttf |传递)(\ ?。*)?/美元, 　　,,装载机:& # 39;url # 39; 　　}

我们并不需要在源代码中做任何改变,因为之前已经引用过样式表dark.less,而字体是在样式表中的,webpack将在打包的时候为我们识别并在代码中引入字体的动态加载。这样一来极大地解决了我们对资源引用的依赖问题!

vue-cli的webpack模板已经为我们配置好了绝大多数常用的装载机,在实际运用中我们只需要了解它们是怎么来的,应该怎么用,需要的时候如何修改就够了。

<强>●,用别名取代路径引用

在项目开发过程中有可能有许多包是没有放在npm上的,有一些较老的可能还依然只存在于凉亭上,某些甚至在鲍尔与npm上都找不到,而不得不通过下载的方式在项目内引用,这样一来我们的代码可能通过需要就得在代码内引用一段很长的文件路径,如下所示

{ 　　,,测试:/\。(woff2 ? |测试结束| ttf |传递)(\ ?。*)?/美元, 　　,,装载机:& # 39;url # 39; 　　}

这种包的引用方式明显违反了<代码> CommonJS> webpack.base.config。js代码中加入以下的这个别名的定义:

module.exports =, { 　　,条目:{,,,}, 　　,输出:{,,,}, 　　…,模块:{,,}, 　　,解决:{ 　　扩展才能:[& # 39;& # 39;& # 39;. js # 39;], 　　别名:{才能,//别名 　　,,& # 39;bs-select& # 39;: & # 39; bower_components bootstrap-select/dist/js/select.js& # 39; 　　,,} 　　,} 　　}

怎么在webpack中使用脚手架vue-cli工程