概述
Browserify 是一个 CommonJS 风格的模块管理和打包工具。 上一篇文章我们简单介绍了一套基于browserify的Vue.js官方开发模板。 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 支持的功能：
支持CommonJs和AMD模块，这意味着我们基本上可以轻松地迁移旧项目。 内联模块加载器和插件机制使其具有更好的灵活性和可扩展性，例如提供对CoffeeScript和ES6的支持。 可以通过配置或智能分析打包成多个文件webpack重要特性，实现公共模块或按需加载。 样式文件和图像等静态资源也可以打包为模块。 配合loader加载器，可以支持sass、less等CSS预处理器。 有内置的source map，即使打包在一起仍然方便调试。
由于本文不是 webpack 教程，所以你还是需要了解一些 webpack 相关的知识。
环境计划
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 文件。
包.json
{
"name": "my-webpack-simple-demo",
"description": "A Vue.js project",
"author": "keepfool ",
"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。 脚本节点还定义了开发和发布期间的编译命令。 与 browserify 不同webpack重要特性，编译的输入和输出是在 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 编写的。 入口节点配置编译入口，输出节点配置输出。 这个入口输出配置的含义是：编译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. 发布
执行以下命令将生成release build.js，该文件已被压缩。
npm run build
使用 vue-webpack 模板
重新打开 git bash 窗口并执行以下命令：
vue init webpack my-webpack-demo
webpack 是项目模板，my-webpack-demo 是项目名称。
目录下生成一个文件夹my-webpack-demo：
├── 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. 运行示例
4. 发布
执行以下命令生成发布：
npm run build
与vue-simple-webpack模板不同的是，所有静态资源，包括index.html，都生成在dist目录中。
这意味着您可以直接使用dist目录来发布应用程序，例如将dist目录发布为IIS下的网站。
vue-simple-webpack 示例
昨天我们使用 vue-simple-browserify 模板做了一个小例子。 今天我们将使用 vue-simple-webpack 模板来完成相同的示例。
我不会发布这个例子的代码。 可以从本文开头的GitHub地址下载。
总结
browserify 和 webpack 都是打包和模块依赖管理工具。 Webpack 的功能比 browserify 更强。 使用哪种工具取决于您的个人喜好和项目要求。
毫无疑问，官方基于vue cli、browserify、webpack的Vue.js项目模板确实能够给我们带来很大的便利，让我们快速投入开发。
在前面的章节中，我将尽可能地基于这个项目模板来解释 Vue.js 的每一点。
