webpack 入門總結和實踐(按需異步加載，css單獨打包，生成多個入口文件)

最近在項目中使用了一下webpack，因此這裏打算對目前瞭解的使用方法作一個小小的總結

爲何是webpack

1. webpack一下本身就🔥了，這絕對是一個重要的緣由。
2. 而後我以前項目中都是經過requireJS，經過AMD來作到模塊化開發。webpak不只支持打包，並且支持AMD 和 CommonJS 方式來作模塊化開發，因此打算嘗試一下webpack來實現模塊化。
3. 個人需求簡單，適合新上手webpack，只須要生成上線目錄，實現模塊化，壓縮代碼等等

webpack實戰

webpack.config.js 通常寫法

開頭聲明對路徑相關的變量，以及引入依賴，包括webpack(非必須)，以及須要的插件
而後，entry 聲明入口相關的如文件名，路徑等，output 聲明生成文件相關的路徑和文件名，module 中是針對不一樣文件進行處理的 loader 聲明，plugins 聲明瞭插件的具體使用。

壓縮代碼

這裏使用webpack的內置的插件，咱們寫在webpack.config.js 中的plugins 部分

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})

提取公共類庫

這部分我沒有用到，但也是基於webpack 內置的插件，目的是將用到的jquery 等第三方庫整合到一個文件，不然都合併到一個文件，會形成這個文件特別大
首先在entry 聲明第三方庫

entry: {
    app: path.resolve(APP_PATH, 'index.js'),
    //添加要打包在vendeors裏面的庫
   vendors: ['jquery', 'moment']
},
plugins: {
      //把入口文件裏面的數組打包成vendors.js
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}

css 單獨打包

有的時候須要將css 單獨打包，做爲CDN，或者我這裏的狀況是是，頁面引入了不少的css js 文件，而個人js 在最後加載！因此若是是js 中引入的css ，那麼會致使頁面在開始的時候沒有樣式，知道解析到個人js ！因此這裏將css 單獨打包，單獨在頁面引入！

首先須要安裝插件

npm install extract-text-webpack-plugin –save-dev

而後在webpack.config.js 中聲明插件

// 引入css 單獨打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 設置生成css 的路徑和文件名，會自動將對應entry入口js文件中引入的CSS抽出成單獨的文件
var packCSS = new ExtractTextPlugin('./css/[name].min.css');

在plugins 中引入並使用

plugins: [
    packCSS
 ]

咱們須要首先在js 中引用相應的css文件

require('./css/plan.css');

而後這個插件會自動將js中的css文件提取出來，生成單獨的文件

樣式的處理

安裝 css-loader style-loader

npm install css-loader style-loader --save-dev

css-loader會遍歷css文件，找到全部的url(...)而且處理。style-loader會把全部的樣式插入到你頁面的一個style

module: {
     loaders: [
       { 
          test: /\.css$/,
          loaders: ['style', 'css'],
          include: APP_PATH
       }
     ]
 }

圖片的處理

安裝 url-loader

npm install url-loader --save-dev

webpack.config.js

{
    test: /\.(png|jpg)$/,
    loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'

}

limit 設置一個閾值，小於這個值得圖片就會自動啓用 base64 編碼的圖片，大於這個值的圖片會打包到name 這參數對應的路徑，圖片名稱就會包括8位md5編碼 name 對應文件原本名稱，ext 對應擴展名

我在圖片這裏遇到的問題和 css 相似，都是本來我是在 js 中引入 css img 等靜態資源。可是
由於個人頁面引入了不少的 css, js 文件，而個人js文件放到最後加載，因此會致使個人js引用的css img 在最後才加載。這會致使頁面開始的時候會出現沒有樣式，而圖片剛開始會顯示失敗的問題。

我原本也但願將 img 單獨打包，可是搜索也實踐了，沒有找到可靠地實現方式，因而我把圖片放到了其餘公共資源目錄（~~~~(>_<)~~~~，只好暫時出此下策了）

一個頁面一個js 文件

我作的項目是多個頁面的，因此須要生成每一個頁面對應的不一樣 js。這裏的處理方法就是咱們每一個 js 都做爲一個不一樣的入口文件如今 enrty 中。這樣設置好 output 中的公共路徑，就能獲得不一樣的 js 文件。

entry: {
        creative: './src/static/js/apps/idea.js',
        plan: './src/static/js/apps/plan.js',
   },
   output: {
        path: 'dist/',
        filename: 'js/[name].min.js'
   }

更新

代碼切分以及異步加載

今天遇到的問題是，我作的一個頁面是要分爲四個步驟，每一個步驟在進入下一步的時候須要對下一步的內容進行接口請求，頁面渲染和事件綁定等操做。

• 以前的作法

  拆分了各個步驟對應模塊以後，我經過commonJS的方式在入口文件開頭引入了各個模塊
  這時候是這樣的

  var stepOne = require('./mods/stepone.js');
     var steptwo = require('./mods/steptwo.js');
     ...
  
     // 使用的時候
     stepone.checkOne();

  這種作法，由於commonJS 的同步加載機制，會致使入口文件打包以後很是臃腫。在首屏，用到用不處處理代碼的都會在一開始就加載，嚴重影響了首屏加載時間。

• 代碼切分以後

  我利用webpack的code splitting 特性，將各個步驟的代碼進行拆分，實現按需加載。這裏主要利用了 webpack 的 require.ensure 函數實現的。很是方便，只須要把異步加載的代碼，放到 require.ensure 裏面的回調函數就能夠實現：

  require.ensure(['./mods/stepone.js'], function(){
          var stepone = require('./mods/stepone.js');
          stepone.checkone();
      }, 'stepone'); // 第三個參數設置打包名稱

  這樣設置，webpack 就會單獨生成拆分的文件，咱們還須要設置拆分文件的名字和路徑。這裏我費了一番周折。

  webpack 默認給拆分的文件用數字命名，若是咱們本身不進行設置，會獲得 1.min.js 這樣相似的文件。咱們能夠在 webpack.config.js 中，經過 output.chunkFilename 來設置分塊生成文件的名稱，分塊的路徑能夠經過 output.publicPath 設置。這裏必定要設置 publicPath，否則獲得的路徑有可能不是咱們上線打包的路徑。具體個人設置以下:

  output: {
          path: path.join(__dirname, 'dist'),
          filename: 'js/apps/[name].min.js',
          publicPath: '/dist/', // 設置require.ensure路徑
          chunkFilename: 'js/apps/[name].min.js' // 設置require.ensure 文件名
      }

總結

webpack 使用起來感受很是新穎，也容易入手！今天總結的可能是入門的內容，後續還要繼續使用~

參考文章

1. Webpack傻瓜式指南 (很是棒的教程，很詳細，保證你入門)
2. 【前端構建】WebPack實例與前端性能優化
3. webpack異步加載業務模塊
4. webpack 學習筆記 03 Code Splitting