使用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: newauthor: fzlicense: (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 // 本地按裝lessnpm install --save less-loader // less模塊的加載器，配合下面css-loader 和 style-loadernpm install --save css-loader // css 模塊加載器npm install --save style-loader // 以上兩個插件的根基npm install --save url-loader // 用來處理 圖片 字體 的模塊，是由下面file-loader封裝的?？勺远x文件名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 vuenpm 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.jsvar 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 入口模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vueapp</title></head><body id="app"> <app></app></body></html>
html-webpack-plugin會自動生成插入的script，制成入口。
// app.jsvar template = require('./app.html');require('./app.less');module.exports = { template: template, data: function (){ return { message: 'hello word!!' }; }};// app.html 視圖模板<div id="div1"> <img src="./static/logo.png" alt=""> <div id="div2"> {{message}} </div></div>// 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就可以看到網頁了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
