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将在打包的时候为我们识别并在代码中引入字体的动态加载。这样一来极大地解决了我们对资源引用的依赖问题！
vue-cli的webpack模板已经为我们配置好了绝大多数常用的loader，在实际运用中我们只需要了解它们是怎么来的，应该怎么用，需要的时候如何修改就够了。
● 用别名取代路径引用
在项目开发过程中有可能有许多包是没有放在npm上的，有一些较老的可能还依然只存在于bower上，某些甚至在bower与npm上都找不到，而不得不通过下载的方式在项目内引用，这样一来我们的代码可能通过require就得在代码内引用一段很长的文件路径，如下所示
{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url' }
这种包的引用方式明显违反了CommonJS的编程规范，对于这些长路径，甚至还具有“../..”这些相对路径搜索的定义，我们可以通过webpack的resolve配置项来解决。就以select这个组件为例，在webpack.base.config.js中加入以下的这个别名的定义：
module.exports = { entry:{ ... }, output: { ... }, module:{ ... }, resolve: { extensions:['','.js'], alias:{ // 别名 'bs-select':'bower_components/bootstrap-select/dist/js/select.js' } } }
有了这个定义以后，我们就可以将上面那个长引用改为下面的写法：
import Selector from 'bs-select';
绝对不要让路径引用进入到我们的代码，因为这是代码的“癌症”，一旦开始植入并生长起来，以前的代码将难以维护！
● 配置多入口程序
多数情况下我们的程序入口不单单只有一个，举一个最简单的例子，前台提供给最终用户使用（），后台提供给登录用户使用（），那么自然需要多个与main.js类似的程序入口了。
首先在build/webpack.base.conf.js配置文件中的entry配置属性上加上新的入口文件：
module.exports = { entry: { app: './src/main.js', admin : './src/admin-main.js' }, // ... 省略 }
这是用于告诉webpack哪几个是入口文件，这些文件需要被生成到启动页的<script>内。
vue-cli的webpack模板使用HtmlWebpackPlugin插件，生成HTML入口页面并自动将生成后的JS文件和CSS文件的引用地址写入到页内的<script>中。
这里就需要在build/webpack.dev.config.js文件内的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成admin.html入口页。