webpack入坑之旅（四）揚帆起航

轉自我的博客：原地址

這是一系列文章，此係列全部的練習都存在了個人github倉庫中vue-webpack，在本人有了新的理解與認識以後,會對文章有不定時的更正與更新。下面是目前完成的列表：

• webpack入坑之旅（一）不是開始的開始

• webpack入坑之旅（二）loader入門

• webpack入坑之旅（三）webpack.config入門

• webpack入坑之旅（四）揚帆起航

• webpack入坑之旅（五）加載vue單文件組件

加載圖片

如今來咱們來試試加載圖片，首先第一件事情，確定是安裝對應的loader。它會將樣式中引用到的圖片轉爲模塊來處理，使用該加載器須要先進行安裝：

npm install url-loader --save-dev

固然你也能夠在package.json添加依賴，而後再npm nstall同樣的效果。

如今去咱們的項目目錄中添加img文件夾，添加兩張圖片，一張大圖jpg，一張小圖png。

而後在咱們的webpack.config.js中添加這段：

loaders: [
    { test: /\.css$/, loader: "style!css" },
    { test: /\.(png|jpg)$/, loader: "url-loade?limit=8192" }   // 添加到這！而且會按照文件大小, 或者轉化爲 base64, 或者單獨做爲文件
    //在大小限制後能夠加上&name=./[name].[ext]，會將咱們的文件生成在設定的文件夾下。
]

在html中添加：

<img src="img/logo.png" alt="">
<div id="qwe"></div>
<div id="asd"></div>

在咱們的css中添加：

/*記得寫寬高。。*/
#qwe{
    background-image: url(img/logo.png);/*3.2k*/
}
#asd{
    background-image: url(img/5.jpg);
}

繼續運行webpack若是正確的話，打開咱們的瀏覽器，就能夠看到咱們正確的圖片顯示。

若是不正確，請運行npm install file-loader -D，再進行嘗試。

如今咱們打開瀏覽器的調試工具，能夠看到小於8K的 背景圖片 圖片已經被轉化成了base64的編碼，而大於8k的圖片則並無轉化（注意它的地址的變化！）。
直接使用img導入的圖也並無進行base64的轉化。

熱加載

當項目逐漸變大，webpack 的編譯時間會變長，能夠經過參數讓編譯的輸出內容帶有 進度 和 顏色 。

webpack --progress --colors

下面還有一些其餘經常使用的命令：

webpack #最基本的啓動webpack命令
webpack -w #提供watch方法，實時進行打包更新
webpack -p #對打包後的文件進行壓縮
webpack -d #提供SourceMaps，方便調試
webpack --colors #輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟
webpack --profile #輸出性能數據，能夠看到每一步的耗時
webpack --display-modules #默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊

咱們已經把webpack的內容瞭解了一部分了，那麼在生產環境中，我不想每一次進行改變，都去命令行中運行咱們的webpack的命令，咱們應該怎麼樣實現改變後自動更新呢？

webpack 爲咱們提供了一個webpack --watch，他會啓動監聽模式。開啓監聽模式後，沒有變化的模塊會在編譯後緩存到內存中，而不會每次都被從新編譯，因此監聽模式的總體速度是很快的。

去運行這個命令試試吧！！

在咱們改變代碼以後，命令行中能夠看到直接就自動編譯了，可是顯然不夠智能，還須要咱們手動去刷新瀏覽器，（其實用liveloadhack成自動刷新！）。

我反正不能忍，還要手動刷新瀏覽器。因此使用webpack-dev-server會是一個更好的辦法！

它將在localhost:8080啓動一個express靜態資源web服務器，而且會以監聽模式自動運行webpack，在瀏覽器打開http://localhost:8080/或 http://localhost:8080/webpack-dev-server/ 能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個socket.io服務實時監聽它們的變化並自動刷新頁面。

# 安裝
npm install webpack-dev-server -g

# 運行
webpack-dev-server

咱們來試試使用vue能配合webpack能不能實現自動刷新。(有關vuejs的知識，你們能夠能夠先自行上官網查看，我在接下來可能也會一步一步的把vue的例子所有敲一遍，再放到github上來讓點評)

首先運行npm install vue -save將vue添加到咱們的項目依賴中去。

首先在咱們的entry.js這個入口文件中進行添加：

// import Vue form ("vue") //若是你安裝了babel-loader的話，能夠直接使用ES6的語法
var Vue =require("vue");
    new Vue({
        el: "body",
        data: {
            message: "hello vue.js"
        }
    });

一樣在index.html中添加{{ meassge }}來響應vue的數據綁定。

運行webpack-dev-server。去瀏覽器查看試試效果吧！任意改變message中的值，能夠看到瀏覽器會自動刷新。而且將改變的值展現在眼前。（有可能只在http://localhost:8080/webpack-dev-server/纔會自動刷新）

這裏其實並無徹底對，不夠全面，可能只能響應css的改變。將在下一篇繼續調整該配置

自動刷新都配好了。下面咱們就來試試怎麼加載vue的文件，來實現單文件組件！