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就得在代码内引用一段很长的文件路径,如下所示

import Selector from '../../bower_components/bootstrap-select/dist/js/select'

这种包的引用方式明显违反了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';

绝对不要让路径引用进入到我们的代码,因为这是代码的“癌症”,一旦开始植入并生长起来,以前的代码将难以维护!

●  配置多入口程序

多数情况下我们的程序入口不单单只有一个,举一个最简单的例子,前台提供给最终用户使用(http://www.domain.com/index),后台提供给登录用户使用(http://www.domain.com/admin/),那么自然需要多个与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入口页。

     plugins:[
// ... 省略 // 这是原有的配置项,用于匹配注入app.js的输出脚本
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
chunks: ['app'], // 与原配置的不同的是要用chunks指定对应的entry
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}), // 这是新增项,用于匹配注入admin.js的输出脚本
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'admin.html'
: config.build.admin,
template: 'index.html',
chunks: ['admin'],
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
]

需要强调一点的是,这里的HtmlWebpackPlugin配置必须用chunks指定在上文entry内对应的入口文件的别名。

关于HtmlWebpackPlugin更多配置内容可以参考:https://github.com/kangax/html-minifier#options-quick-reference。

还有就是得将同样的配置加入到生产环境专用的webpack配置文件webpack.prod.conf.js中,否则当我们运行npm run build时是不会输出admin.js和admin.html这两个入口文件的(由于配置内容相同这里就不再重复了)。

最后,如果使用了vue-router就得对connect-history-api-fallback插件的配置进行修改,否则原有的默认配置只会将所有的请求转发给index.html,这样就会导致History API没有办法正确地将请求指向admin.html,导致热加载失败,具体做法如下所述。

打开dev-server.js文件,将app.use(require('connect-history-api-fallback')())配置改为以下的方式:

    // handle fallback for HTML5 history API
var history = require('connect-history-api-fallback')
// app.use(require('connect-history-api-fallback')()) app.use(history({
rewrites: [
{ from: /^\/admin\/.*$/, to: '/admin.html' }
]
}));

新入口需要有明确区分的路由规则,否则还是会产生热加载失败的情况,这样就非常不便于开发了。

脚手架vue-cli系列四:vue-cli工程webpack的基本用法的更多相关文章

  1. Vue学习系列(四)——理解生命周期和钩子

    前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过 ...

  2. 脚手架vue-cli系列三:vue-cli工程webpack的作用和特点

    Vue项目开发过程中,会因为很多不同的实际运用需求不断地对webpack配置进行修改,在此之前,我们需要对webpack有一个基本的认识,了解它到底能为我们做些什么 webpack是一个模块打包的工具 ...

  3. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  4. vue 开发系列(九) VUE 动态组件的应用

    业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现. 较常规的方法是使用v-if 来实现, ...

  5. Vue技术点整理-Vue CLI

    Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...

  6. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  7. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  8. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  9. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

随机推荐

  1. Python中import, from...import,import...as的区别

    import datetime print(datetime.datetime.now()) 以上代码实现输出系统当前时间,是引入整个datetime包,然后再调用datetime这个类中的now() ...

  2. CentOS7 firewalld防火墙配置

    [root@ecs ~]# firewall-cmd --version       //查看版本0.3.9 [root@ecs ~]# firewall-cmd --state        //查 ...

  3. node.js中process进程的概念和child_process子进程模块的使用

    进程,你可以把它理解成一个正在运行的程序.node.js中每个应用程序都是进程类的实例对象. node.js中有一个 process 全局对象,通过它我们可以获取,运行该程序的用户,环境变量等信息. ...

  4. dbus 消息和消息总线实例讲解-一

    应用程序A和消息总线连接,这个连接获取了一个众所周知的公共名(记作连接A).应用程序A中有对象A1提供了接口I1,接口I1有方法M1. 应用程序B和消息总线连接,要求调用连接A上对象A1的接口I1的方 ...

  5. 操作系统学习笔记(三) windows内存管理

    //系统物理页面是由 (Page Frame Number Database )简称PFN数据库来进行管理,实际上是一个数组,每个物理页面都对应一个PFN项. 进程的地址空间是通过VAD(Virtua ...

  6. 第三次spring会议

    昨天天所做之事: 我用C#用DelectText对行数进行了定义,刚开始写代码有点无从下手. 遇到的问题:刚开始用datagridView进行了文本的输入,但是它更适合EXCEL之类的数据计算不符合我 ...

  7. Linux学习笔记:常用命令

    个人常用的Linux命令总结(持续更新): 切换目录:cd 列出目录下面的文件:ls 显示当前所在的目录:pwd 操作文件 新建文件:touch file01 查看文件内容:less more cat ...

  8. javaScrpit 开端

    JavaScript 代码可以直接嵌在网页的任何地方,不过我们通常把JavaScrpit放到<head>中: <html> <head> <script> ...

  9. 参考文献bib管理

    比如在IEEE模板中,在当前目录添加 bib 文件reference.bib 在 \end{document} 之前加入 \bibliographystyle{IEEEtran} \bibliogra ...

  10. poj 2505 A multiplication game

    题目 题意:两个人轮流玩游戏,Stan先手,数字 p从1开始,Stan乘以一个2-9的数,然后Ollie再乘以一个2-9的数,直到谁先将p乘到p>=n时那个人就赢了,而且轮到某人时,某人必须乘以 ...