webpack學(xué)習(xí)之路

當(dāng)自己在學(xué)習(xí)webpack的時(shí)候智什，在網(wǎng)上發(fā)現(xiàn)中文的很詳細(xì)的教程很少，于是便想將自己學(xué)習(xí)webpack的筆記記錄整理下來(lái)篓足，便有了這篇文章未状，希望對(duì)大家有所幫助，如果有錯(cuò)誤蜕径，歡迎大家指出两踏。

在我們開(kāi)始之前

• webpack有多種加載器(Loader,后面會(huì)介紹),可以處理各種需要被處理的靜態(tài)文件

• webpack支持CommonJs AMD CMD規(guī)范

• 在使用webpack的項(xiàng)目中，默認(rèn)配置文件為webpack.config.js, 模塊文件兜喻，和Node寫法一樣梦染，對(duì)外暴露接口,主要屬性有:

  • plugins插件項(xiàng)
  • entry入口文件配置項(xiàng)
  • output對(duì)應(yīng)輸出項(xiàng)配置
  • module.loaders 最關(guān)鍵的配置，告知webpack不同的文件需要什么加載器進(jìn)行處理

• 模塊系統(tǒng)的幾種類型

  • <script>標(biāo)簽類型

    • 缺點(diǎn)
      • 全局作用域下造成變量的沖
      • 文件加載順序很重要
      • 模塊與模塊之間的依賴要解決
      • 在大型項(xiàng)目中難以維護(hù)和管理

  • CommonJs

    • 優(yōu)點(diǎn)

      • 服務(wù)端模塊能夠重復(fù)利用
      • 有優(yōu)秀的包管理工具npm
      • 簡(jiǎn)單朴皆，上手容易

    • 缺點(diǎn)

      • 不適合瀏覽器端的使用
      • 不能做到并行加載模塊

  • AMD

    • 優(yōu)點(diǎn)

      • 適合瀏覽器的異步加載機(jī)制
      • 并行加載模塊

    • 缺點(diǎn)

      • 代碼難以經(jīng)營(yíng)和維護(hù)

  • ES6

    • 優(yōu)點(diǎn)

      • 未來(lái)的ES規(guī)范

    • 缺點(diǎn)

      • 瀏覽器對(duì)ES6的支持還需要一段時(shí)間
      • 能夠依賴的現(xiàn)有的模塊少

' 轉(zhuǎn)換 ' 的思想

模塊要能夠在客戶端中去執(zhí)行帕识，則必須將它們從 server => browser

• 極端的想法:

  • 一個(gè)請(qǐng)求一個(gè)模塊 只有需要的模塊會(huì)被轉(zhuǎn)換，但是耗費(fèi)資源遂铡，時(shí)間長(zhǎng)
  • 所有請(qǐng)求都在一個(gè)模塊 不需要的模塊也會(huì)被轉(zhuǎn)換 時(shí)間短肮疗，耗費(fèi)資源少

• 分塊轉(zhuǎn)換的想法:

  • 將眾多的模塊切成許多片，在初始化時(shí)的請(qǐng)求不會(huì)包括完整的代碼扒接，并且在初始化時(shí)不需要的模塊切片會(huì)在后續(xù)加載過(guò)程中按需加載伪货。并且將模塊化的切片方式是可以有開(kāi)發(fā)人員自己定義的。

wepback它的目標(biāo)是是什么钾怔？

webpack它能將依賴的模塊轉(zhuǎn)化成可以代表這些包的靜態(tài)文件

它的目標(biāo)有

• 將依賴的模塊分片化碱呼，并且按需加載
• 解決大型項(xiàng)目初始化加載慢的問(wèn)題
• 每一個(gè)靜態(tài)文件都可以看成一個(gè)模塊
• 可以整合第三方庫(kù)
• 能夠在大型項(xiàng)目中運(yùn)用
• 可以自定義切割模塊的方式

webpack較之其他類似工具有什么不同？

• 有同步和異步兩種不同的加載方式
• Loader,加載器可以將其他資源整合到JS文件中蒂教，通過(guò)這種方式巍举，可以講所有的源文件形成一個(gè)模塊
• 優(yōu)秀的語(yǔ)法分析能力，支持 CommonJs AMD 規(guī)范
• 有豐富的開(kāi)源插件庫(kù)凝垛，可以根據(jù)自己的需求自定義webpack的配置

webpack為什么要將所有資源放在一個(gè)文件里面懊悯？

我們知道，對(duì)于瀏覽器來(lái)說(shuō)梦皮，加載的資源越少炭分，響應(yīng)的速度也就越快，所以有時(shí)候我們?yōu)榱藘?yōu)化瀏覽器的性能剑肯，會(huì)盡可能的將資源合并到一個(gè)主文件app.js里面捧毛。但是這導(dǎo)致的很大的缺點(diǎn)：

• 當(dāng)你的項(xiàng)目十分龐大的時(shí)候，不同的頁(yè)面不能做到按需加載，而是將所有的資源一并加載呀忧，耗費(fèi)時(shí)間長(zhǎng)师痕，性能降低。
• 會(huì)導(dǎo)致依賴庫(kù)之間關(guān)系的混亂而账，特別是大型項(xiàng)目時(shí)胰坟，會(huì)變得難以維護(hù)和跟蹤。比如:哪些文件是需要A模塊加載完后才能執(zhí)行的泞辐？哪些頁(yè)面會(huì)受到多個(gè)樣式表同時(shí)影響的笔横？ 等許多問(wèn)題。

而webpack可以很好的解決以上缺點(diǎn),因?yàn)樗且粋€(gè)十分聰明的模塊打包系統(tǒng)咐吼，當(dāng)你正確配置后吹缔，它會(huì)比你想象中的更強(qiáng)大，更優(yōu)秀锯茄。

開(kāi)啟wbpack之旅

安裝webpack

• 我們可以直接使用npm進(jìn)行全局安裝

  npm install webpack -g

• 在常規(guī)項(xiàng)目中把webpack依賴加入到package.json

  npm init npm install webpack --save

更詳盡的安裝方法個(gè)可以參考webpack安裝

webpak命令行常見(jiàn)使用的操作

啟動(dòng)

webpack

如果你想當(dāng)改變一個(gè)文件而讓webpack實(shí)時(shí)編譯

webpack --watch

如果你想把默認(rèn)的配置文件webpack.config.js改成自定義文件

webpack --config customconfig.js

webpack的用法

首先先貼上一個(gè)比較完整的webpack.config.js的代碼厢塘，再詳細(xì)介紹：

// webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}

就像我在前面提到的，webpack.config.js的寫法和在Node里的寫法相同肌幽，我們主要看的就是文件中的module.exports里面的內(nèi)容

• entry 是指入口文件的配置項(xiàng)俗冻，它是一個(gè)數(shù)組的原因是webpack允許多個(gè)入口點(diǎn)。

• output是指輸出文件的配置項(xiàng)

  • path － 表示輸出文件的路徑
  • filename - 表示輸出文件的文件名

• plugins 顧名思義牍颈，使用插件可以給webpack添加更多的功能迄薄，使webpack更加的靈活和強(qiáng)大,webpack有兩種類型的插件:

  • webpack內(nèi)置的插件

      // 首先要先安裝webpack模塊
      var webpack = require("webpack");
      
      module.exports = {
          new webpack.optimize.UglifyJsPlugin({
            compressor: {
              warnings: false,
            },
          })
      };
    

  • webpack外置插件

    比如:

      //npm install component-webpack-plugin 先要在安裝該模版
      var ComponentPlugin = require("component-webpack-plugin");
      module.exports = {
          plugins: [
              new ComponentPlugin()
          ]
      }
    

  更多的插件以及插件的用法，大家可以到webpack的插件上查看煮岁。

• module 配置處理文件的選項(xiàng)

  • loaders 一個(gè)含有wepback中能處理不同文件的加載器的數(shù)組

    • test 用來(lái)匹配相對(duì)應(yīng)文件的正則表達(dá)式
    • loaders 告訴webpack要利用哪種加載器來(lái)處理test所匹配的文件

  • loaders 的安裝方法

      $ npm install xxx-loader --save-dev
    

講到這里讥蔽，我相信大家都會(huì)對(duì)wepback有了更深的認(rèn)識(shí)，但是卻十分的松散画机，不能把它們串起來(lái)冶伞，那接下來(lái)我就用幾個(gè)小的demo來(lái)讓大家梳理梳理起來(lái)

舉個(gè)例子

首先請(qǐng)大家建立一個(gè)和我一樣文件結(jié)構(gòu)的文件夾，在這里我也說(shuō)明下這個(gè)demo大概要做的事情步氏，就是將css文件都打包放到一個(gè)js文件响禽，并且對(duì)圖片解壓，并且要對(duì)這個(gè)js文件進(jìn)行自動(dòng)壓縮荚醒。

DemoOne
|- dist
|- src
    |- index.js
    |- index.html
    |- style.css
    |- demo.png(隨便找一張圖片就可以)
|- package.json
|- webpack.config.js

首先看index.html代碼

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
    </head>
    <body>
        <div>Hello,world</div>
        [站外圖片上傳中……(1)]
        <script src="../dist/bundlle.js"></script>
    </body>
    </html>

再看style.css

body{
    background:red;
}

這個(gè)時(shí)候我們還沒(méi)有寫webpack.config.js,打開(kāi)index.html,會(huì)看到

demo1.png

打開(kāi)控制臺(tái)后芋类，你會(huì)發(fā)現(xiàn)

demo1_1.png

接下來(lái)，我們?cè)?code>webpack.config.js下加上如下代碼

// webpack.config.js
var path = require('path')
var webpack = require('webpack');

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    {
        test: /\.(png|jpg)$/,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }]
  }
}

當(dāng)然界阁，在開(kāi)始用webpack之前侯繁，要先安裝相對(duì)應(yīng)的模塊，解析css文件 圖片文件以及因?yàn)橐獙?duì)文件進(jìn)行壓縮泡躯，所以也要用到上文中所說(shuō)的webpack自身內(nèi)置的插件,所以也要導(dǎo)入webpack模塊

$ npm install style-loader css-loader image-webpack-loader webpack --save-dev

安裝好之后使用webpack命令后會(huì)有這樣的提示

demo1_2.png

require('./style.css');
require('./demo.png');

再運(yùn)行webpack,出現(xiàn)上圖類似提示后，打開(kāi)瀏覽器惰拱，你會(huì)發(fā)現(xiàn)變成了這個(gè)樣子

 ![Uploading demo1_5_017947.png . . .]

并且在dist文件夾內(nèi)凫乖，多出了兩個(gè)文件，一個(gè)f1341ce5ea165e06ec3358441b52d5ea.png（隨機(jī)產(chǎn)生的名字）如果你想獲得這個(gè)名字弓颈，可以將require('./demo.png')輸出查看，以及還有bundle.js,比較圖片前后的大小删掀，

demo1_4.png

demo1_5.png

可以發(fā)現(xiàn)翔冀，文件大小發(fā)生了改變。打開(kāi)bundle.js你會(huì)發(fā)現(xiàn)該文件也被壓縮了披泪。是不是感覺(jué)很神奇纤子？！
還有一個(gè)比較好玩的插件htmlwebpackplugin可以點(diǎn)擊這里看看款票，把上面的例子改變下哦控硼。

最后

我相信看到這里你對(duì)webpack一定有了一定的認(rèn)識(shí)，其實(shí)艾少，還webpack還有很多強(qiáng)大的功能卡乾，比如，webpack-dev-server可以自動(dòng)生成一個(gè)小型的NodeJs Express服務(wù)器從而實(shí)現(xiàn)webpack十分實(shí)用的功能熱替換(HMR) 和其它的工具gulp grunt等一起使用缚够。幔妨。。最后值得一提的是react和webpack是一對(duì)絕佳cp啊谍椅，有木有Ｎ蟊ぁ！

最后雏吭，希望這篇博客對(duì)大家有所幫助（如果是锁施，請(qǐng)盡情star哦，??）杖们，歡迎提出您的寶貴建議～