本文將介紹從零開始搭建vue的打包環(huán)境撕阎，重點(diǎn)介紹webpack蠢沿，vue的知識點(diǎn)請恕本文無恥的省略了
OK，開始酪术！
什么是webpack
webpack是一款模塊加載器兼打包工具骤星，它能把各種資源经瓷，例如JS（含JSX）、coffee洞难、樣式（含less/sass）舆吮、圖片等都作為模塊來使用和處理。
點(diǎn)擊這里 前往官網(wǎng)
點(diǎn)擊這里 前往官方中文站
本文基于webpack 1.14.x的版本
安裝
由于webpack是一個(gè)基于node的項(xiàng)目队贱，所以首先需要確保你的電腦里面已經(jīng)安裝了node.js色冀，以及npm。
全局安裝：
npm install webpack@1.14 -g
安裝成功之后柱嫌，在命令行輸入webpack -h即可查看當(dāng)前安裝的版本信息锋恬，以及可以使用的指令
[root@localhost ~]# webpack -v
1.14.0
當(dāng)然，我們都應(yīng)該將webpack安裝到當(dāng)前項(xiàng)目的依賴中编丘，此時(shí)就可以使用項(xiàng)目的本地版本webpack
# 確保已經(jīng)進(jìn)入項(xiàng)目目錄
# 初始化一個(gè)package.json文件
npm init
# 一路回車即可
# 安裝webpack依賴与学，這里我們安裝1.14.x的版本
npm install webpack@1.14 --save-dev
# 簡寫
npm install webpack@1.14 -S
# –save：模塊名將被添加到dependencies，可以簡化為參數(shù)-S嘉抓。
# –save-dev: 模塊名將被添加到devDependencies索守，可以簡化為參數(shù)-D。
安裝好之后我們的package.json應(yīng)該是這樣的：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^1.14.0"
}
}
初始化vue的項(xiàng)目目錄結(jié)構(gòu)
webpack 項(xiàng)目目錄
|--dist 編譯打包生成的文件存放的目錄
|--node_modules npm包存放的目錄掌眠，自動生成
|--src vue應(yīng)用的源碼存放目錄
|--|---pages vue其它組件的存放目錄
|--|---main.js vue應(yīng)用的入口js
|--|---App.vue vue應(yīng)用的根組件
|--index.html vue應(yīng)用的骨架html
|--package.json npm配置文件
|--webpack.config.js webpack配置文件
源碼
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack vue</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/build.js"></script>
</body>
</html>
src/main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
src/App.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg : 'Hello World!'
}
}
}
</script>
利用npm安裝vue
npm install vue vue-router vuex -S
安裝好之后我們的package.json應(yīng)該是這樣的：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0",
"vuex": "^2.2.1",
"webpack": "^1.14.0"
}
}
webpack的配置
命令行輸入webpack直接回車蕾盯，webpack會自動搜索當(dāng)前目錄下的webpack.config.js文件幕屹，按照配置文件運(yùn)行
下面是一個(gè)簡單的webpack配置文件蓝丙，只處理js
var path = require('path'),
webpack = require('webpack')
module.exports = {
entry: './src/main',
output: {
path: path.join(__dirname, './dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
}
};
簡單介紹下配置文件
entry
webpack入口設(shè)置
module.exports = {
entry: './src/main'
}
這里定義入口文件，可以單個(gè)望拖，可以多個(gè)：
module.exports = {
entry: {
app: './app',
index: './index'
}
}
這里的入口文件路徑都是相對于webpack.config.js文件的路徑，文件后綴.js可以省略
output
打包編譯輸出設(shè)置
module.exports = {
output: {
path: path.join(__dirname, './dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
}
}
output.path
打包編譯生成的文件存儲路徑，這里是絕對路徑
output.filename
打包編譯生成的文件名旨别，這里[name]會根據(jù)入口定義自動生成文件名
例如：
- 單入口
入口定義
module.exports = {
entry: './src/main'
}
生成文件 main.js
- 多入口
入口定義
module.exports = {
entry: {
app: './app',
index: './index'
}
}
生成文件 app.js和index.js
output.publicPath
其它文件生成的路徑搪锣，例如：css、圖片等
loader介紹
Loader可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)医咨，接受源文件作為參數(shù)枫匾，返回轉(zhuǎn)換的結(jié)果。這樣拟淮，我們就可以通過require來加載任何類型的模塊或文件干茉，比如VUE、JSX很泊、SASS 或圖片角虫。
上配置：
module.exports = {
module: {
loaders: [
{
test: /\.vue$/, // 這里是正則表達(dá)式
loader: 'vue' // 這里是對應(yīng)的loader
},
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
]
}
}
loader怎么來呢，很簡單委造，通過npm直接安裝
npm install vue-loader css-loader vue-template-compiler -S
安裝好之后我們的package.json應(yīng)該是這樣的：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^0.26.2",
"vue": "^2.2.1",
"vue-loader": "^11.1.3",
"vue-router": "^2.3.0",
"vue-template-compiler": "^2.2.1",
"vuex": "^2.2.1",
"webpack": "^1.14.0"
}
}
于是戳鹅，我們的webpack配置文件就長這樣了
var path = require('path'),
webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.css/,
loader: 'style!css'
}
]
}
}
注意 這里
output.filename設(shè)置的是build.js，對應(yīng)上面index.html模版中引入的js文件是build.js
添加ES6的支持
如果現(xiàn)在你的項(xiàng)目還沒有對ES6的語法支持昏兆，那就有點(diǎn)沒有逼格了枫虏，其實(shí)大家都知道這個(gè)也很簡單，因?yàn)槲覀冇袀ゴ蟮?a target="_blank" rel="nofollow">Babel
首先安裝loader
npm install babel-core babel-loader babel-preset-es2015 -S
然后修改配置文件
{
test: /\.js$/,
loader: 'babel?cacheDirectory',
exclude: /node_modules/
}
項(xiàng)目根目錄下新增babel配置文件.babelrc
{
"presets": ["es2015"],
"comments": false
}
One more thing.
babel 給每個(gè)需要的文件注入helper擴(kuò)展
原文：
babel is injecting helpers into each file and bloating my code!
babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it.
下面的配置通過babel-plugin-transform-runtime插件可以禁用babel向每個(gè)文件注入helper
首先是安裝babel-plugin-transform-runtime爬虱，npm install babel-plugin-transform-runtime -S
babel配置文件.babelrc調(diào)整為：
{
"presets": ["es2015"],
"plugins": ["transform-runtime"],
"comments": false
}
OK模软，打開命令行輸入webpack --color --progress就可以見證webpack 的打包了
至此，vue應(yīng)用就可以正常運(yùn)行了
