webpack學習之路

時間  2019-11-16
標籤 webpack 學習 之路 简体版
原文   原文鏈接

webpack學習之路

當本身在學習webpack的時候，在網上發現中文的很詳細的教程不多，因而便想將本身學習webpack的筆記記錄整理下來，便有了這篇文章，但願對你們有所幫助，若是有錯誤，歡迎你們指出。css

在咱們開始以前

  • webpack有多種加載器(Loader,後面會介紹),能夠處理各類須要被處理的靜態文件
  • webpack支持CommonJs AMD CMD規範

  • 在使用webpack的項目中，默認配置文件爲webpack.config.js, 模塊文件，和Node寫法同樣，對外暴露接口,主要屬性有:html

    • plugins插件項
    • entry入口文件配置項
    • output對應輸出項配置
    • module.loaders 最關鍵的配置，告知webpack不一樣的文件須要什麼加載器進行處理

  • 模塊系統的幾種類型react

    • <script>標籤類型webpack

      • 缺點
        • 全局做用域下形成變量的衝
        • 文件加載順序很重要
        • 模塊與模塊之間的依賴要解決
        • 在大型項目中難以維護和管理

    • CommonJsgit

      • 優勢github

        • 服務端模塊可以重複利用
        • 有優秀的包管理工具npm
        • 簡單，上手容易

      • 缺點web

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

    • AMD正則表達式

      • 優勢npm

        • 適合瀏覽器的異步加載機制
        • 並行加載模塊
      • 缺點
        • 代碼難以經營和維護

    • ES6json

      • 優勢

        • 將來的ES規範

      • 缺點

        • 瀏覽器對ES6的支持還須要一段時間
        • 可以依賴的現有的模塊少

' 轉換 ' 的思想

模塊要可以在客戶端中去執行，則必須將它們從 server => browser

  • 極端的想法:

    • 一個請求一個模塊 只有須要的模塊會被轉換，可是耗費資源，時間長
    • 全部請求都在一個模塊 不須要的模塊也會被轉換 時間短，耗費資源少

  • 分塊轉換的想法:

    • 將衆多的模塊切成許多片，在初始化時的請求不會包括完整的代碼，而且在初始化時不須要的模塊切片會在後續加載過程當中按需加載。而且將模塊化的切片方式是能夠有開發人員本身定義的。

wepback它的目標是是什麼？

webpack它能將依賴的模塊轉化成能夠表明這些包的靜態文件

它的目標有

  • 將依賴的模塊分片化，而且按需加載
  • 解決大型項目初始化加載慢的問題
  • 每個靜態文件均可以當作一個模塊
  • 能夠整合第三方庫
  • 可以在大型項目中運用
  • 能夠自定義切割模塊的方式

webpack較之其餘相似工具備什麼不一樣？

  • 有同步和異步兩種不一樣的加載方式
  • Loader,加載器能夠將其餘資源整合到JS文件中，經過這種方式，能夠講全部的源文件造成一個模塊
  • 優秀的語法分析能力，支持 CommonJs AMD 規範
  • 有豐富的開源插件庫，能夠根據本身的需求自定義webpack的配置

webpack爲何要將全部資源放在一個文件裏面？

咱們知道，對於瀏覽器來講，加載的資源越少，響應的速度也就越快，因此有時候咱們爲了優化瀏覽器的性能，會盡量的將資源合併到一個主文件app.js裏面。可是這致使的很大的缺點：

  • 當你的項目十分龐大的時候，不一樣的頁面不能作到按需加載，而是將全部的資源一併加載，耗費時間長，性能下降。
  • 會致使依賴庫之間關係的混亂，特別是大型項目時，會變得難以維護和跟蹤。好比:哪些文件是須要A模塊加載完後才能執行的？哪些頁面會受到多個樣式表同時影響的？ 等許多問題。

而webpack能夠很好的解決以上缺點,由於它是一個十分聰明的模塊打包系統，當你正確配置後，它會比你想象中的更強大，更優秀。

開啓wbpack之旅

安裝webpack

  • 咱們能夠直接使用npm進行全局安裝

    npm install webpack -g

  • 在常規項目中把webpack依賴加入到package.json

    npm init npm install webpack --save

更詳盡的安裝方法個能夠參考webpack安裝

webpak命令行常見使用的操做

啓動

webpack

若是你想當改變一個文件而讓webpack實時編譯

webpack --watch

若是你想把默認的配置文件webpack.config.js改爲自定義文件

webpack --config customconfig.js

webpack的用法

首先先貼上一個比較完整的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,
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}

就像我在前面提到的，webpack.config.js的寫法和在Node裏的寫法相同，咱們主要看的就是文件中的module.exports裏面的內容

  • entry 是指入口文件的配置項，它是一個數組的緣由是webpack容許多個入口點。

  • output是指輸出文件的配置項

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

  • plugins 顧名思義，使用插件能夠給webpack添加更多的功能，使webpack更加的靈活和強大,webpack有兩種類型的插件:

    • webpack內置的插件

      // 首先要先安裝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 配置處理文件的選項

      • loaders 一個含有wepback中能處理不一樣文件的加載器的數組

        • test 用來匹配相對應文件的正則表達式
        • loaders 告訴webpack要利用哪一種加載器來處理test所匹配的文件

      • loaders 的安裝方法

        $ npm install xxx-loader --save-dev

講到這裏，我相信你們都會對wepback有了更深的認識，可是卻十分的鬆散，不能把它們串起來，那接下來我就用幾個小的demo來讓你們梳理梳理起來

舉個例子

首先請你們創建一個和我同樣文件結構的文件夾，在這裏我也說明下這個demo大概要作的事情，就是將css文件都打包放到一個js文件，而且對圖片解壓，而且要對這個js文件進行自動壓縮。

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>
        <img src="./demo.png" alt="">
        <script src="../dist/bundlle.js"></script>
    </body>
    </html>

再看style.css

body{
    background:red;
}

這個時候咱們尚未寫webpack.config.js,打開index.html,會看到image

打開控制檯後，你會發現image

接下來，咱們在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'
        ]
    }]
  }
}

固然，在開始用webpack以前，要先安裝相對應的模塊，解析css文件 圖片文件以及由於要對文件進行壓縮，因此也要用到上文中所說的webpack自身內置的插件,因此也要導入webpack模塊

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

安裝好以後使用webpack命令後會有這樣的提示image

可是這個時候你打開瀏覽器會發現，頁面依舊沒有什麼效果，這是確定的！我想你們確定知道下一步該怎麼作了，沒錯！在入口文件裏面增長內容

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

再運行webpack,出現上圖相似提示後，打開瀏覽器，你會發現變成了這個樣子image

而且在dist文件夾內，多出了兩個文件，一個f1341ce5ea165e06ec3358441b52d5ea.png（隨機產生的名字）若是你想得到這個名字，能夠將require('./demo.png')輸出查看，以及還有bundle.js,比較圖片先後的大小，

imageimage

能夠發現，文件大小發生了改變。打開bundle.js你會發現該文件也被壓縮了。是否是感受很神奇？！ 還有一個比較好玩的插件htmlwebpackplugin能夠點擊這裏看看，把上面的例子改變下哦。

最後

我相信看到這裏你對webpack必定有了必定的認識，其實webpack還有不少強大的功能，好比，webpack-dev-server能夠自動生成一個小型的NodeJs Express服務器從而實現webpack十分實用的功能熱替換(HMR) 和其它的工具gulp grunt等一塊兒使用。。。最後值得一提的是react和webpack是一對絕佳cp啊，有木有！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程