前端webpack workflow（二）——Webpack基本使用

做者：Jogis
原文連接：https://github.com/yesvods/Blog/issues/3
轉載請註明原文連接以及做者信息

前一篇文章介紹了webpack以及安裝方法，此次將會介紹webpack在單頁面應用程序（Single Page Application）與多頁面站點不一樣場合的用法。

輸入與輸出

跟其餘模塊加載器相似，webpack也是須要配置一個入口文件，好比是entry.js
有幾種配置方式，下面來介紹一下直接把入口文件寫在配置文件 webpack.config.js：

module.exports = {
  entry: {
    "entry":"./entry.js"
  },
  output: {
    path: "build",
    filename: "bundle.js"
  }
}

經過命令行

> webpack

很便利地，webpack檢測配置文件，讀取模塊入口與輸出路徑和文件名,將文件依賴整合成一個文件，輸出到build/bundle.js

經過在HTML簡單引入

<script src="./build/bundle.js"></script>

就能夠在瀏覽器運行。

加載器

簡單的SPA程序加載，包括：JS編譯與加載、CSS編譯與加載、圖片加載與壓縮、JS與CSS壓縮。

Webpack提供了一套加載器機制，好比：css-loader、style-loader、url-loader等，用於將不一樣資源加載到js文件中，例如url-loader用於在js中加載png/jpg格式的圖片文件，css/style loader 用於加載css文件，less-loader用於將less文件編譯成css。

下面介紹一些經常使用的加載器（詳細介紹在這裏）：

style+css+less加載Bootstrap less版本：

require('style!css!less!./bower_components/bootstrap/bootstrap.less');

style+css 加載通常樣式文件：

require('style!css!./styles/main.css');

url 加載圖片資源文件：

require('url!./images/logo.png');

json loader加載json格式文件:

require('json!./data.json');

js後綴的文件不須要使用加載器

require('./scripts/main.js');

coffee script加載

require('coffee!./scripts/main.coffee');

喜歡嚐鮮的童鞋能夠經過Babel loader體驗ES6/7特性：

require('babel!./scripts/es6.js');

須要注意的是，避免用babel做爲加載器加載全部node_module模塊，會出現意外結果，並且大量加載狀況下，加載時間很長。babel還能夠用做reactjs jsx文件加載使用，詳細請看。

配置加載器

剛剛介紹了行內加載資源的方式，若是有不少css或者圖片資源須要加載，重複寫加載器顯得很笨拙，webpack提供另外一種方式加載資源。
在配置文件添加配置：

module.exports = {
  module: {
    loaders: [
      {test: /\.css$/, loader: "style!css"},
      {test: /\.(png|jpg)$/, loader: "url-loader?limit=8192"}
    ]
  }
}

其中test是正則表達式，對符合的文件名使用相應的加載器
/.css$/會匹配 xx.css文件，可是並不適用於xx.sass或者xx.css.zip文件
/.css/除了匹配xx.css也能夠匹配xx.css.zip

加載器後能夠加入?xx=yy傳遞參數,表示添加將xx設置爲yy（跟http地址Query很像）

須要注意的是，使用加載器前須要使用

> npm i --save xxx-loader

安裝相應加載器，並經過--save把依賴配置到package.json中，使用加載器並不須要使用require引入。

搜索路徑變量

以上介紹的加載器，能夠很方便使用webpack整合平常資源，若是認爲webpack僅僅只能作這些，那就讓您失望了。

能夠看到，以上加載資源時候，都使用相對路徑來描述路徑，對於那些./app/src/scripts/main.js經過修改webpack配置文件，添加默認搜索路徑後，顯得更加優雅。

// webpack.config.js
var path = require("path")
module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "./app/src/scripts")
    }
  }
}

更改配置文件後加載：

require("js/main.js");

默認搜索路徑配置

對於bower_components死忠們，前端開發少不了幾個bower插件，使用gulp能夠經過gulp-wiredep來動態把bower.json dependencies加載到指定HTML文件。
在webpack也有很是便利的導入方法：
首先，加入配置

module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "src/scripts"),
      src: path.join(__dirname, "src/scripts"),
      styles: path.join(__dirname, "src/styles"),
      img: path.join(__dirname, "src/img")
    },
    root: [
      path.join(__dirname, "bower_components")
    ]
  },
  plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
      )
  ]
}

resolve.root 表示添加默認搜索路徑，使用以下語法：

require("jquery");

webpack會在bower_components/jquery目錄下進行查找CommandJS模塊node_module/index.js、index.js
可是，由於Bower不屬於CommandJS規範範疇,使用的是bower.json main屬性指定項目入口文件
說到這裏，你們就知道plugins裏面那串東東是幹嗎的啦

以後，咱們就能夠很方便在任何js文件裏面引用jquery：

var jQuery = $ = require("jquery");

須要注意的是，require的並不是jquery.js，而是bower_components目錄下的文件夾名

多頁面開發

webpack 不只僅適用於SPA開發，對於多頁面站點，webpack支持得很好，經過更改配置文件爲多入口：

module.exports = {
  entry: {
    "entry":"./src/scripts/entry.js",
    "swiperEffect":"./src/scripts/swiperEffect.js"
  },
  output: {
    path: "build"
    filename: "[name].bundle.js"
  }
}

output設置裏面，[name]表明entry的每個鍵值，所以運行webpack時候，會輸出對應的兩個文件：

build/entry.bundle.js
build/swiperEffect.bundle.js

而後就能夠在index.html和about.html兩個頁面分別引用啦

文件分離

前端工程一項就是減小http請求，這表示須要把多個js合併成一個，可是，單個js文件過大會影響瀏覽器加載文件速度，因爲如今瀏覽器併發http請求多達6個，能夠利用這個特性，將可複用第三方資源庫分離加載。

使用CommandJS規範的

//entry.js
require.ensure(["jquery", "imgScroll"], function(require){
  var $ = require("jquery");
  require("imgScroll");
  $("#container").scroll({
    XXX
  })
})

經過require.ensure聲明的文件，稱做按需加載依賴，這些依賴會獨立出來一個文件，待入口模塊加載完，須要請求時候纔會相繼加載

再次編譯webpack：

build/entry.bundle.js
build/swiperEffect.bundle.js
build/2.2.bundle.js

其中2.2.bundle.js就是jquery+imgScroll異步加載內容
一圖勝千言：

能夠看到2.2.bundle.js在entry.bundle.js加載完後進行異步加載。

webpack 實用命令

除了簡單運行webpack，還能夠添加幾個參數，方便部署文件處理。

輸出js文件，通過uglify進行壓縮：

> webpack -p

自動監聽變化，動態運行webpack編譯：

> webpack --watch

一般Dev階段，使用--watch配合live-server就能夠自動化開發繁瑣的窗口切換與回車。

以上僅僅介紹了webpack前端開發最基本的用法，更多參數以及功能使用，參考官網