利用webpack+vue頁(yè)面構(gòu)建說(shuō)明簡(jiǎn)介
使用平臺(tái)： win7(其他平臺(tái)請(qǐng)自行查找相關(guān)參考資料)
安裝服務(wù)：安裝nodejs作為本地服務(wù)，下載相應(yīng)的nodejs 安裝后都办，在cmd命令行中輸入 node -v 檢測(cè)是否有對(duì)應(yīng)的版本號(hào)的返回以確認(rèn)安裝成功嫡锌。
安裝管理包工具npm：npm nodejs下的工具管理包，在新版的nodejs中已經(jīng)集成了npm, 在安裝nodejs 成功后 在cmd命令行中輸入 npm -v 檢測(cè)是否有對(duì)應(yīng)的版本號(hào)返回以確認(rèn)安裝成功琳钉。
項(xiàng)目構(gòu)建：
????1.創(chuàng)建項(xiàng)目文件夾世舰。
????2.創(chuàng)建package.json文件： 再創(chuàng)建好項(xiàng)目文件夾后，進(jìn)入該目錄槽卫，在該目錄下輸入命令 npm init 然后對(duì)應(yīng)的輸入改項(xiàng)目的名稱和創(chuàng)建者的相關(guān)信息。（如果沒(méi)有相關(guān)修改胰蝠，一直回車即可）
name:""http://輸入項(xiàng)目名稱
version:"<1.0.0>"http://項(xiàng)目版本號(hào)
description:""http://項(xiàng)目描述
entry point:<index.js>//入口文件
author:""http://創(chuàng)建者相關(guān)信息
license:<ISC>//項(xiàng)目模塊的協(xié)議(isc以一種開(kāi)放源代碼的許可證歼培，更多協(xié)議自行設(shè)定)
這樣便形成了初始的package.json 文件。
????3.安裝該項(xiàng)目的依賴包：在package.json中添加我們需要的依賴包以及對(duì)應(yīng)的版本號(hào)茸塞，該處主要安裝的是依賴包對(duì)應(yīng)的兼容版本躲庄。（也可根據(jù)自己的需求安裝不同的版本，可參考semver文檔）
"dependencies": {
"vue": "^1.0.28",
"vue-router": "^0.7.13"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.18.0",
"babel-runtime": "^5.8.34",
"css-loader": "^0.16.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^3.4.2",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
}
在package.json中添加好之后 輸入命令 npm install 所依賴的模塊將會(huì)被自動(dòng)添加钾虐，添加之后會(huì)形成一個(gè)新的文件目錄 node_modules 該文件夾中包含了我們所安裝的模塊噪窘。也可不用整體安裝模塊，可以根據(jù)需要一個(gè)安裝模塊效扫，在安裝每一個(gè)時(shí)使用命令 npm install xxx(模塊名和版本號(hào)),該命令安裝后倔监，package.json中不會(huì)出現(xiàn)對(duì)應(yīng)的依賴包列表，要將其添加到package.json列表中菌仁，使用命令 npm install xxx(模塊名和版本號(hào)) -D
4.webpack.config.js 的配置(以下僅作為參考)可根據(jù)自己的需要進(jìn)行配置的調(diào)整
var path = require('path');
var webpack = require('webpack');
// NodeJS中的Path對(duì)象浩习，用于處理目錄的對(duì)象，提高開(kāi)發(fā)效率济丘。
// 模塊導(dǎo)入
module.exports = {
// 入口文件地址谱秽，不需要寫完，會(huì)自動(dòng)查找
entry: './src/main',
// 輸出
output: {
path: path.join(__dirname, './dist'),
// 文件地址摹迷，使用絕對(duì)路徑形式
filename: '[name].js',
//[name]這里是webpack提供的根據(jù)路口文件自動(dòng)生成的名字
publicPath: './dist/'
// 公共文件生成的地址
},
// 服務(wù)器配置相關(guān)疟赊，自動(dòng)刷新!
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true,
},
// 加載器
module: {
// 加載器
loaders: [
// 解析.vue文件
{ test: /\.vue$/, loader: 'vue'},
// 轉(zhuǎn)化ES6的語(yǔ)法
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
//{ test: /\.js$/, loader: 'babel'},
// 編譯css并自動(dòng)添加css前綴
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
//.less 文件想要編譯，less就需要這些東西峡碉！來(lái)編譯處理
//install css-loader style-loader less-loader --save-dev
{ test: /\.less$/, loader: 'style!css!less?sourceMap'},
// 圖片轉(zhuǎn)化近哟，小于8K自動(dòng)轉(zhuǎn)化為base64的編碼
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
//html模板編譯？
//{ test: /\.(html|tpl)$/, loader: 'html-loader' },
]
},
// .vue的配置鲫寄。需要單獨(dú)出來(lái)配置椅挣，其實(shí)沒(méi)什么必要--因?yàn)槲覄h了也沒(méi)保錯(cuò)
vue: {
loaders: {
css: 'style!css!less!autoprefixer',
}
},
// 轉(zhuǎn)化成es5的語(yǔ)法
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
// require時(shí)省略的擴(kuò)展名头岔，如：require('module') 不需要module.js
extensions: ['', '.js', '.vue'],
// 別名，可以直接使用別名來(lái)代表設(shè)定的路徑以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
},
// 開(kāi)啟source-map鼠证，webpack有多種source-map峡竣，在官網(wǎng)文檔可以查到
//devtool: 'eval-source-map'
devtool: 'cheap-source-map'
};
更多參考
有關(guān)webpack的更多參考 （http://webpack.github.io/）
這篇文章完成較早了，一直沒(méi)有發(fā)布量九，現(xiàn)在已經(jīng)更新到vue2xx和webpack2xx,不過(guò)其中還有可參考之處适掰，希望能對(duì)大家有所幫助。
