webpack -> vue Component 從入門到放棄（三）

離上一篇已經一個星期了，人的拖延症是無法救的，今晚趁着濛濛春雨，來抒發抒發情感。
上一篇簡單介紹了webpack的配置，這裏稍微再作一一下延伸

插件

插件能夠完成更多 loader 不能完成的功能。插件的使用通常是在 webpack 的配置信息 plugins 選項中指定。
Webpack 自己內置了一些經常使用的插件，還能夠經過 npm 安裝第三方插件。接下來，咱們利用一個最簡單的 BannerPlugin 內置插件來實踐插件的配置和運行，這個插件的做用是給輸出的文件頭部添加註釋信息。

修改 webpack.config.js，添加 plugins：

var webpack = require('webpack');
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  },
  plugins:[
    new webpack.BannerPlugin('it is BannerPlugin')
  ]
}

而後運行 webpack，打開 bundle.js，能夠看到文件頭部出現了咱們指定的註釋信息：

/*! it is BannerPlugin */
/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function

開發環境

若是每一次文件的改變，都須要去運行一次webpack，那是一件很麻煩的事，例如我用的是sublime寫代碼，要是想運行一段代碼，首先要用webpack打包，而後再瀏覽器上還要刷新，簡直不能忍麼。這裏有兩種解決方案

watch

看名字就知道是監聽的意思，咱們來測試一下（ps:這裏咱們加個有意思的東西，--progress --colors，想知道幹嗎用？運行一下你就知道了）

$ webpack --progress --colors --watch

// --progress 在編譯的時候多了個進度顯示
//--colors 一些代碼的高亮
//--watch 雖然不用每次都運行webpack了，可是改完一次還須要刷新瀏覽器，纔會發生變化

webpack-dev-server

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

# 安裝
$ cnpm install webpack-dev-server -g

# 運行
$ webpack-dev-server --progress --colors

大概的webpack就介紹到這吧，有了基礎的理解後，你能夠根據本身的需求，去官網進行相應的瞭解，也能夠參考別人項目學一點經驗，好了，這篇文章就結束了，由於下一篇就要結合vueComponent了，在完成component的結合後，我相信你對webpack會有一個更好的認識。

webpack -> vue Component 從入門到放棄（四
webpack -> vue Component 從入門到放棄（二）
webpack -> vue Component 從入門到放棄（一）
github源代碼