国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack入門學習手記（一）

mengera88 / 1833人閱讀

摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四

本人微信公眾號：前端修煉之路，歡迎關注。

之前用過gulp、grunt，但是一直沒有學習過webpack。這兩天剛好有時間，學習了下webpack。webpack要想深入研究，配置的東西比較多，網上的資源也有很多。我這里學習的主要途徑是webpack官方給出的指南，和webpack中文網的翻譯版本。因為我覺得第一手資料肯定是官網給出的更權威一些。

我學習的過程是，先看一遍中文網的文章，對每一節的內容有個大致印象和理解；然后再看一遍英文的官方文檔，按照官方文檔給出的示例配置文件照著做一遍。如果哪里英文理解有問題，再照著中文的文檔反復思考一下。所以我的這篇文章，也有類似翻譯英文官方文檔。因為我就說照著文檔操作，然后再把這個過程按照自己的理解重新整理成文章。

之所以這么做的原因是，一方面要提高自己的英文文檔閱讀和理解能力，另一方面是中文的文檔一般都會更新得比較滯后和有不少錯誤，不能光按照中文手冊去做。最后就是肯定要動手自己操作一遍的，理解起來是一回事兒，操作起來就是另外一回事兒了。

在這個過程中，主要有一下幾點心得：

后悔沒有早點學webpack，功能太強大了。

webpack功能和概念真多，感覺一下子學不完，只能用啥學啥。先整理出主要內容，細節一點點學習、補充。

通過一段時間的鍛煉，閱讀英文文檔能力有所提高，需要繼續努力。爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。

以下是正文~

概念

在開始之前，必須要知道webpack涉及的概念。目前我學習webpack是最新的版本是v4.27.1，另外官網明確指出，從webpack 4 以上開始，就不在需要必須制定配置文件，但是仍然具備可擴展性。

為了學習webpack，需要理解的核心概念：

Entry：入口

Output：輸出

Loaders：loader

Plugins：插件

Mode：模式

Browser Compatibility：瀏覽器兼容

Entry

entry說簡單點，就是沒有打包之前的原文件。可以指定一個文件、可以指定多個文件或者不同目錄下的文件。如果不指定，默認值為：./src/index.js。在配置文件中指定其他文件時，例如：

module.exports = {
  entry: "./path/to/my/entry/file.js"
};
Output

output屬性告訴webpack在哪里輸出打包好的文件，以及如何命名這個文件。默認情況下是./dist/main.js，作為主要的輸出文件，./dist目錄就是輸出的目錄。

可以在配置文件中修改output屬性來修改輸出文件和目錄，例如：

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js"
  }
};

上面例子中，使用output.filename和output.path屬性，告訴webpack打包文件的名字和打包文件的目錄。其中的path模塊是，Node.js模塊。

Loaders

webpack只能識別JavaScript和JSON文件，Loaders允許webpack處理其他類型的文件。在webpack配置文件中，需要指定一下兩個屬性

test：test屬性告訴webpack哪些文件需要被轉換。

use：use屬性告訴webpack相應的文件使用哪個loader進行轉換。

例如：

webpack.config.js

const path = require("path");

module.exports = {
  output: {
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  }
};

上面的配置中定義了一個module.rules屬性，這個屬性又有兩個屬性：test和use。這就好像告訴webpack編譯器說：

”Hi，webpack編譯器，當你發現任何后綴為.txt的文件時，請使用raw-loader先轉換一下，然后再把轉換后的內容添加到打包文件中。“
Plugins

Loaders是用來轉換某些類型的模塊，而插件可以做更廣泛的工作，例如壓縮、優化程序，甚至改變環境變量。

想使用一個插件，只需要通過require()這個插件，然后在plugins數組中添加這個插件。大多數的插件，都是支持修改配置的。例如：

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
const webpack = require("webpack"); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
};

在上面的例子中，使用html-webpack-plugin生成一個HTML文件，這個文件就是你的應用程序。在其中已經自動引用好了打包的文件。

Mode

通過設置mode屬性，可以啟動webpack內置的優化。你可以指定development、production、none，分別對應著不同的環境。默認的是production。例如：

webpack.config.js

module.exports = {
  mode: "production"
};
Browser Compatibility

webpack 支持所有基于ES5的瀏覽器，但是IE8及以下是不支持的。因為webpack需要import()和require()。如果需要支持老版本瀏覽器，可以使用loader解決。

以上就是webpack的核心概念。下一篇筆記整理webpack官方文檔的指南手冊，敬請關注。

（待續）

相關文章

webpack入門學習手記（一）

webpack入門學習手記（二）

webpack入門學習手記（三）

webpack入門學習手記（四）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99960.html

相關文章

  • webpack入門學習手記（五）

    摘要：另外需要指定這個參數，表示在配置的數值以下的圖片才進行編碼，超過的不進行處理。代碼如下所以過程就是引入了，然后進行打包處理，生成和。目前這個入門學習手記到這里就結束了。完相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

    AlphaWatch 評論0 收藏0

  • webpack入門學習手記（二）

    摘要：例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。 最近開始想要維護一個個人的公眾...

    Joyven 評論0 收藏0

  • webpack入門學習手記（四）

    摘要：本人微信公眾號前端修煉之路，歡迎關注。再過一天，就是年了，在這里祝大家新年快樂，闔家歡樂，萬事大吉。 showImg(https://image-static.segmentfault.com/230/457/2304574665-5c1373e5a1763_articlex); 本人微信公眾號：前端修煉之路，歡迎關注。 再過一天，就是2019年了，在這里祝大家新年快樂，闔家歡樂，萬事...

    ygyooo 評論0 收藏0

  • webpack入門學習手記（三）

    摘要：本人微信公眾號前端修煉之路，歡迎關注。距離上一次更新這個系列，過去了兩天。最近實在是有點忙，沒有擠出時間整理。感覺日更還真是困難 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。 距離上一次更新這個系列，過去了兩天。最近實在是有點忙，沒有擠出時間整理。感覺日更還真是困難

    rozbo 評論0 收藏0

  • Python爬蟲建站入門手記——從零開始建立采集站點（一：環境搭建）

    摘要：從今天起，我將在這里更新一個系列的簡單爬蟲到建立網站的實踐手記。內容將會從最簡單的開始，環境搭建，基本爬蟲，入庫，用建立可供用戶訪問的網站，網站部署。第一部分，買，裝環境。我們爬蟲站點的所有文件都放在里面。 從今天起，我將在這里更新一個系列的python簡單爬蟲到建立網站的實踐手記。 內容將會從最簡單的開始，環境搭建，基本爬蟲，入庫，用Django建立可供用戶訪問的網站，網站部署。 ...

    HackerShell 評論0 收藏0

發表評論

0條評論

mengera88

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<