189 8069 5689
使用webpack打包Vue工程
目前创新互联公司已为上千的企业提供了网站建设、域名、网站空间、网站托管、服务器租用、企业网站设计、万全网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
前言
入行一年，从什么都不懂的小白，到现在什么都懂一点的小白，也算是飞跃了。感叹一下现在的前端，从nodejs出来到现在各种各样的工具如雨后春笋般的出现。大神们疯狂的造轮子，玩的不亦乐乎。我等小白们，疯狂追赶，学的心肝脾肺都快衰竭。而我的精力也仅限浅尝辄止，但是学多一点总有好处的。本篇文章就是介绍如何使用webpack构建前端工程。
目标
本次的工程以Vue.js为主角，Vue.js是一款小巧优雅而且强大的轻量级mvvm框架，配合webpack模块化打包。制作出如下图的效果。仅仅搭一个框架，会用上很多插件和加载器。
环境准备
主要是一些全局的nodejs包
sudo npm install webpack -g // -g 代表全局安装webpack，调出命令行即可使用webpack命令 sudo npm install less -g // -g 全局安装 less to css 转换器
开始
1. 初始化工程
创建工程文件夹 new 并定位到 new
mkdir new && cd new
使用npm初始化工程
npm init
根据需要设置项目的信息， 也可以一路回车，使用默认信息，默认项目名称为文件夹名（项目名称不要设置成某个模块名，否则将来你引用摸个模块的时候会报错）
name: (new)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords: new
author: fz
license: (ISC)
{
"name": "gt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"new"
],
"author": "fz",
"license": "ISC"
}
Is this ok? (yes)
之后文件夹下会生成一个package.json,记录了项目的详细信息，包括了各种依赖和插件。
2. 创建目录以及webpack配置文件
├── dist // 编译之后输出文件的目录 ├── src // 应用逻辑代码存放区域 │ ├── lib // 存放npm上找不到的第三方库 │ │ ├── backbone.js │ │ └── underscore.js │ ├── static // 存放静态资源 │ │ └── logo.png │ ├── app.html // 部件模板 │ ├── app.js // 部件代码 │ └── app.less // 部件样式 ├── index.html // 应用首页模板 ├── index.js // 应用入口 ├── package.json // 工程配置文件 └── webpack.config.js // webpack配置文件
现在的目录结构，文件都是空白的，等一下把他们补上。
3. 安装webpack各中模块的loader（加载器）和插件以及我们需要的模块
npm install --save less // 本地按装less npm install --save less-loader // less模块的加载器，配合下面css-loader 和 style-loader npm install --save css-loader // css 模块加载器 npm install --save style-loader // 以上两个插件的根基 npm install --save url-loader // 用来处理 图片 字体 的模块，是由下面file-loader封装的。可自定义文件名 npm install --save file-loader npm install --save html-loader // 加载html文件用的 npm install --save text-loader // 加载纯文本用的 npm install --save html-webpack-plugin // 生成html文件插件 npm install --save extract-text-webpack-plugin // 单独提取css文件插件 npm install --save webpack // 提供webpack对象 npm install --save webpack-dev-server // webpack-server开发包，方便调试 npm install --save vue npm install --save jquery
4. 完成后的package.json
{
"name": "new",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --hot --inline", // 用户启动 webpack-dev-server 用于用户调试 --hot 代表热替换 ， --inline 模式。。不太清楚。
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"new"
],
"author": "fz",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.6",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"jquery": "^2.1.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"text-loader": "0.0.1",
"url-loader": "^0.5.7",
"vue": "^1.0.26",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
3. 编写webpack.config.js配置文件
webpack配置文件比较复杂，需要做一下说明：webpack作为一款模块打包器，其管理的单元就是模块，webpack的模块指的不仅仅是js，包括了样式，图片，字体，模板等等。不同的模块需要相应的loader作为加载器进行加载。
var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
引入必要的插件和模块
module.exports = {
entry: {
"index": "./index.js",
"common": ['vue', 'jquery', 'underscore', 'backbone']
},entry 顾名思义就是入口，他是程序的入口，但它同时也是chunk（代码块）构造器。构造有两种方式，上面一种，通过文件内require的模块关系，将文件打包成chunk。下面一种意思就是组成这个chunk的是这几个模块（backbone，underscore等三方模块的定义在下面， vue，jQuery，可以直接通过npm安装）。
这个配置会编译出两个文件，一个当作公共库使用，一个当作网站入口使用。
output: {
path: './dist',
publicPath: '/path/',
filename: '[name].[hash].js'
},很明显，这里是输出文件控制
例如: 入口文件名叫index，那么它的输出就是index.d87f87sd6fsdgs76gsd967.js
module: {
loaders: [
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.less$/,
loader: extractTextWebpackPlugin.extract("style-loader", "css-loader!less-loader")
// 配合‘extract-text-webpack-plugin'可以剥离，css
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
loader: 'url-loader?limite=8192' // limit 是转换base64的文件大小的阀值8兆
},
{
test: /\.html$/,
loader: 'html-loader' // 可以用来加载模板
}
]
},
module 这部分，我不是很了解，只知道这里可以用于loader定义。loaders是一个数组。
加载器可以多个配合使用，典型的就是style css less，逻辑还是很清晰的，less 转 css 转 样式模块，然后插入文档。
resolve: {
root: [
path.resolve(__dirname, 'src/lib')
],
extensions: ['', '.js'],
alias: {
'underscore': 'underscore.js',
'backbone': 'backbone.js',
}
},
解析模块功能，用来解析三方模块和一些require不方便的模块。
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: '[name].[hash].js',
chunks: ['index', 'common'] // extract commonChunk from index & common
}),
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
chunks: ['index', 'common']
}),
new webpack.ProvidePlugin({
jQuery: "jquery"
}),
new webpack.optimize.UglifyJsPlugin(),
new extractTextWebpackPlugin("style.css", {
allChunks: true
})
]
};
插件库定义
插件可以更具开发环境定义，因为插件越多，编译越慢，我们在开发环境的时候其实不需要那么多插件，生产环境的时候才需要，所以可以做一些处理，动态添加插件。这里有文章可以做,不介绍。
4. 写逻辑代码
// index.js
var Vue = require('vue');
var app = new Vue({
el: '#app',
components: {
app: require('./src/app.js')
}
});
require('vue')，使用vue模块，新建vue实例，（vue的具体用法上官网），内建一个app字组件，用同步的方法获取在./src/目录下的app.js模块。
// index.html 入口模板vueapp
html-webpack-plugin会自动生成插入的script，制成入口。
// app.js
var template = require('./app.html');
require('./app.less');
module.exports = {
template: template,
data: function (){
return {
message: 'hello word!!'
};
}
};
// app.html 视图模板
{{message}}
// app.less 视图样式
#div1 {
text-align: center;
}
#div2 {
font-size: 30px;
}
定义一个视图，作为首页，引入模板，引入样式，一个SPA的架子就这么搭好了。
5. 编译
在工程目录下命令行输入
webpack
生成目录
├── dist │ ├── common.6b92c6b075a69a71d22f.js │ ├── index.6b92c6b075a69a71d22f.js │ ├── index.html │ └── style.6b92c6b075a69a71d22f.css
编译完成，可以看到以上的目录，common为公共提取的模块，style是公共提取的css文件，index.js，逻辑入口。项目打包完成。
6. 调试开发
webpack 提供了 weppack-dev-server 插件，很方便我们进行调试，我们在package.json的script中定义一个命令：
'dev': 'webpack-dev-server --hot --inline'
我们就可以在命令行中输入 npm run dev，在浏览器输入localhost：8080就可以看到网页了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。