概述

browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板。webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能。
官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-simple模板创建一个简单的示例。

本文的Demo和源代码已放到GitHub,如果您觉得内容不错,请点个赞,或在GitHub上加个星星!

Webpack简介

Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

下图是官方对Webpack的简介,通过这幅图也不难看出,一些相互依赖的模块文件,会被打包成一个或多个js文件,可以减少HTTP的请求次数。

Webpack支持的特性:

  1. 支持CommonJs和AMD模块,意思也就是我们基本可以无痛迁移旧项目。
  2. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持。
  3. 可以通过配置或智能分析打包成多个文件,实现公共模块或按需加载。
  4. 将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器,可以支持sass,less等CSS预处理器。
  5. 内置有source map,即使打包在一起依旧方便调试。

由于本文不是webpack的教程,所以webpack相关的一些知识还需要各位去了解。

webpack主页:http://webpack.github.io/

环境准备

Node.js和Git是必备的工具,NPM的版本最好是3.x版本以上,NPM 3.x提供了更有效的包依赖管理。

在使用这两种项目模板前,需要先安装vue cli,执行以下命令安装vue cli

npm install -g vue-cli

安装完vue cli后,我们就可以基于vue-webpack-simple模板和vue-webpack模板创建项目了。

使用vue-webpack-simple模板

1.生成项目

在某个目录下右键运行Git Bash Here,比如我的目录是D:\VueOfficialTemplates。

在git bash下输入以下命令:

vue init webpack-simple my-webpack-simple-demo

webpack-simple是项目模板的名称,my-webpack-simple-demo是你要生成的项目名称。

目录下生成了一个文件夹my-webpack-simple-demo。

2. 项目结构说明

打开my-webpack-simple-demo文件夹,看到以下目录结构:

文件树结构如下:

├─.babelrc		// babel配置文件
├─.gitignore
├─index.html // 主页
├─package.json // 项目配置文件
├─README.md
├─webpack.config.js // webpack配置文件
├─dist // 发布目录
│ ├─.gitkeep
├─src // 开发目录
│ ├─App.vue // App.vue组件
│ ├─main.js // 预编译入口

相比于browserify-simple模板,多了一个webpack.config.js文件。

package.json

{
"name": "my-webpack-simple-demo",
"description": "A Vue.js project",
"author": "keepfool <crmug@outlook.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^1.0.0",
"babel-runtime": "^6.0.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"cross-env": "^1.0.6",
"css-loader": "^0.23.0",
"file-loader": "^0.8.4",
"json-loader": "^0.5.4",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.2.1",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
}

开发时依赖babel、各种loader和webpack,发布时依赖vue和babel-runtime。
scripts节点同样定义了开发时和发布时的编译命令,和browserify不同的是,编译的输入和输出是定义在webpack.config.js文件中的。

webpack.config.js

var path = require('path')
var webpack = require('webpack') module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
])
}

webpack.config.js内容还是比较好理解的,它采用了CommonJS的写法,entry节点配置了编译入口,output节点配置了输出。
这段entry和output配置的含义是:编译src/main.js文件,然后输出到dist/build.js文件。

3. 安装项目依赖

执行以下命令安装项目依赖:

cd my-webpack-simple-demo
npm install

安装完成后,目录下会产生一个node_modules文件夹。

项目相关的依赖都存放在这个文件夹下了,比vue-browserify-simple项目模板的依赖要多得多。

4. 运行示例

执行以下命令运行示例:

npm run dev

打开127.0.0.1:8080,可以看到以下画面:

注意:和browserify不同的是,执行npm run dev命令后并不会在dist目录下生成build.js文件,开发环境下build.js是在运行内存中的。

5. 发布

执行以下命令会生成发布时的build.js,并且是经过压缩的。

npm run build

使用vue-webpack模板

重新打开一个git bash窗口,执行以下命令:

vue init webpack my-webpack-demo

webpack是项目模板,my-webpack-demo是项目名称。

目录下生成了一个文件夹my-webpack-demo:

文件目录结构如下(参考:https://vuejs-templates.github.io/webpack/structure.html

├── build/                      # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig.js # editor config
├── .eslintrc.js # eslint config
├── index.html # index.html template
└── package.json # build scripts and dependencies

2. 安装依赖

执行以下两行命令,安装项目依赖:

cd my-webpack-demo
npm install

(安装过程较为缓慢,需要耐心等待…)

3. 运行示例

执行以下命令运行示例:

npm run dev

打开127.0.0.1:8080,可以看到以下画面:

4. 发布

执行以下命令生成发布:

npm run build

和vue-simple-webpack模板不同的是,所有的静态资源,包括index.html都生成到dist目录下了。

这意味着你可以直接拿着dist目录去发布应用,例如在IIS下将dist目录发布为一个网站。

vue-simple-webpack示例

昨天我们使用了vue-simple-browserify模板做了一个小示例,今天我们就用vue-simple-webpack模板完成同样的示例。

该示例的代码我就不贴出来了,大家可以到本文开头的GitHub地址去下载。

总结

browserify和webpack都是打包和模块依赖管理工具,webpack拥有比browserify更强的功能,使用哪种工具取决于你们个人的偏好、项目的要求。
毋庸置疑的是,Vue.js官方基于vue cli, browserify, webpack构筑的几个项目模板,确实能够给我们带来很大的便利,可以让我们快速地投入到开发中。
在后面的篇章中,我将尽可能地基于这些项目模板来讲解Vue.js的点点滴滴。

Vue.js——60分钟webpack项目模板快速入门的更多相关文章

  1. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  2. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  3. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  4. 转: Vue.js——60分钟组件快速入门(上篇)

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  5. Vue.js——60分钟快速入门(转)

    vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...

  6. Vue.js 60 分钟快速入门

    Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...

  7. 不会几个框架,都不好意思说搞过前端: Vue.js - 60分钟快速入门

    Vue.js——60分钟快速入门   Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...

  8. Vue.js——60分钟快速入门 开发· webpack 中文文档

    转载于:http://www.cnblogs.com/keepfool/p/5619070.html http://www.css88.com/doc/webpack2/guides/get-star ...

  9. Vue.js——60分钟组件快速入门(上篇)

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

随机推荐

  1. Oracle数据库无法向listener注册的解决一例

    当机器的IP地址改变了,或者机器名改变后, 动态注册可能会失败. 运行 lsnrctl status时,无论等待多久,都会发生:no services 这样的信息. 此时,最好的解决方法,就是删除原有 ...

  2. tomcat : 虚拟路径映射

    tomcat设置虚拟访问地址和真实路径的映射,方法有几种,这里介绍常用的两种方式: 一.修改server.xml文件: 步骤如下:  1.在tomcat根目录下打开conf文件夹,该文件夹下有个ser ...

  3. 柯朗微积分与数学分析习题选解(1.3 节 c)

    一直在读<陶哲轩实分析>,陶的书非常的严谨,环环相扣,但是也有个缺点就是计算性的例子和应用方面的例子太少了.所以就又找了本柯朗的<微积分与数学分析>搭配着看.柯朗的书的习题与陶 ...

  4. 3、顺序表、内存、类型、python中的list

    1.内存.类型本质.连续存储 1.内存本质 2.C 语言实例-计算 int, float, double 和 char 字节大小 使用 sizeof 操作符计算int, float, double 和 ...

  5. python爬取快手ios端首页热门视频

    最近快手这种小视频app,特别的火,中午吃过午饭,闲来无聊,想搞下快手的短视频,看能不能搞到. 于是乎, 打开了fiddler,开始准备抓包, 设置代理,重启,下一步,查看本机ip 手机打开网络设置 ...

  6. python中@property和property函数使用

    1.基本的@property使用,可以把函数当做属性用 class Person(object): @property def get_name(self): print('我叫xxx') def m ...

  7. hashCode及HashMap中的hash()函数

    一.hashcode是什么 要理解hashcode首先要理解hash表这个概念 1. 哈希表 hash表也称散列表(Hash table),是根据关键码值(Key value)而直接进行访问的数据结构 ...

  8. ats Linux路由器上内联

    路由设置假定客户端集在单个物理接口后面的不同网络上. 出于本例的目的,我们将假设: 客户端位于172.28.56.0/24网络上路由器连接网络172.28.56.0/24和192.168.1.0/24 ...

  9. 简单理解DNS解析流程(一)

    0x0 简单理解dns DNS服务器里存着一张表 表中放着域名和IP地址,域名和IP地址以映射关系保存,即一对一 浏览器访问某个域名,实际上是访问它的ip地址 所以浏览器需要知道域名对应的ip地址 如 ...

  10. ipmitool命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/EricDing/p/8995263.html [root@localhost ~]# yum install -y i ...