前言
vuejs――輕量、學習成本低、雙向綁定、無dom的操作、組件的形式編寫
vuejs是個輕量級的mvvm框架， 集合了angular的基本功能，卻又比angular更為精簡，功能上涵蓋了雙向綁定、指令、邏輯控制、過濾器、事件監聽、函數等。框架的特點使得項目 在狀態變更、分頁的場景下可以擁有很大的便利――所有的操作只需要變更數組，沒有任何的dom操作。
webpack――CommonJS的引用和編寫方式、loader非常的豐富，包括vue-loader、css-loader、less-loader
webpack是前端組件化的解決方案，webpack提供了核心的CommonJS引用方案去引用資源，下面這篇文章就給大家介紹webpack和vue.js，一起來看看吧。
項目的創建
1.新建項目文件夾，并在其中建立package.json
$ mkdir [project name]$ cd [project name]$ npm init
2.在項目目錄下新建index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue example</title></head><body> <div>{{message}}</div> <script src="dist/build.js"></script></body></html>src文件夾，并在該文件夾下建立main.js
import Vue from 'vue'new Vue({ el:'body', data:{ message:'test success!' }});設置webpack
1.安裝webpack，webpack-dev-server以及相關的loaders
# 全局安裝webpack，webpack-dev-server$ npm install -g webpack$ npm install -g webpack-dev-server# 為項目安裝其他依賴$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D
webpack-merge：開發環境和生產環節的webpaak配置文件的配置合并
css-loader：編譯寫入css
style-loader：把編譯后的css整合進html
file-loader：編譯寫入文件，默認情況下生成文件的文件名是文件名與MD5哈希值的組合
vue：vue主程序
vue-loader：編譯寫入.vue文件
vue-html-loader：編譯vue的template部分
vue-style-loader：編譯vue的樣式部分
vue-hot-reload-api：webpack對vue實現熱替換
babel-core：ES2015編譯核心
babel-loader：編譯寫入ES2015文檔
babel-preset-es2015：ES2015語法
babel-preset-stage-0：開啟測試功能
babel-runtime：babel執行環境
url-loader
這里介紹下url-loader，這個loader實際上是對file-loader的封裝
比如CSS文件中有時候會這么寫：
.demo{ background-image: url('a.png');}module:{ loaders:[ {test://.(png|jpg)$/,loader:'url-loader?limit=8192'} ]}經過以上配置，當a.png小于8K就會自動將圖片轉換成base64編碼，如果不小于，則不會轉換。
這里順便提一句，在module配置的時候，loader的寫法：
module:{ loaders:[ {test://.jade$/,loader:'jade'} //這里配置了讓webpack識別jade的loader，其他類似，比如.vue //用于css文件的loader有兩種寫法 {test://.css$/,loader:'style!css'} {test://.css$/,loaders:['style','css']} ]}2.配置webpack.config.js
在根目錄下建立webpack.config.js，配置如下：
var path = require('path');module.exports = { entry: './src/main.js', //定義webpack輸出的文件，我們在這里設置了 讓打包后生成的文件放在dist文件夾下的build.js文件中 output: { path: './dist', publicPath:'dist/', filename: 'build.js' }, module: { loaders: [ //轉化ES6語法 { test: //.js$/, loader: 'babel', exclude: /node_modules/ }, //圖片轉化，小于8K自動轉化為base64的編碼 { test: //.(png|jpg|gif)$/, loader:'url-loader?limit=8192' } ] }, //這里用于安裝babel，如果在根目錄下的.babelrc配置了，這里就不寫了 babel: { presets: ['es2015','stage-0'], plugins: ['transform-runtime'] }}特別說明
如果要在.babelrc下配置babel，則需要在根目錄下新建該文件，windows環境下，不能新建該txt文件然后改后綴，需要通過dos命令建立：
echo>.babelrc
通過該命令就可以建立babelde配置文件，用編輯器打開，修改里面的內容為：
{ "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"]}完成該配置我們在命令中運行
$ webpack
打開index.html就可以看到瀏覽器中看到我們剛剛寫的文字
總結
至此我們實現了最基本的利用webpack打包vue，大家最好自己實際操作下代碼才能更好的理解，希望這篇文章對大家能有所幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
