脚手架vue-cli工程webpack的基本用法详解

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

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

●  样式表引用

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

import Vue from 'vue'// ... 省略// 引用指定的样式源文件import './app/assets/less/dark.less'export default { // ... 省略}

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

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

import 'uikit/dist/css/components/tabs.css'

●  字体的引用

假设在dark.less内加入对自定义字体文件的样式定义：

@font-face {  font-family: 'Darkenstone';  src: url('./Darkenstone.eot');  src: url('./Darkenstone.eot?#iefix') format('embedded-opentype'),   url('./Darkenstone.woff2') format('woff2'),   url('./Darkenstone.woff') format('woff'),   url('./Darkenstone.ttf') format('truetype'),   url('./Darkenstone.svg#Darkenstone') format('svg');   font-weight: normal;      font-style: normal;}.header{  display: flex;  flex-flow: row nowrap;  & > h1 {   font: 16pt 'Darkenstone';  }}

这里.header>h1指定了一个Darkenstone的自定义字体，这个字体浏览器一定是不能识别的，以前我们在样式表中先定义这个字体样式并指定加载位置（如上文@font-face的定义），然后在页面中引用这个样式表，这是多么麻烦的一件事，不是吗？

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

{  test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,  loader: 'url'}

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