成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack入門學(xué)習(xí)手記（一）

mengera88 / 1844人閱讀

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

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

之前用過gulp、grunt，但是一直沒有學(xué)習(xí)過webpack。這兩天剛好有時(shí)間，學(xué)習(xí)了下webpack。webpack要想深入研究，配置的東西比較多，網(wǎng)上的資源也有很多。我這里學(xué)習(xí)的主要途徑是webpack官方給出的指南，和webpack中文網(wǎng)的翻譯版本。因?yàn)槲矣X得第一手資料肯定是官網(wǎng)給出的更權(quán)威一些。

我學(xué)習(xí)的過程是，先看一遍中文網(wǎng)的文章，對每一節(jié)的內(nèi)容有個(gè)大致印象和理解；然后再看一遍英文的官方文檔，按照官方文檔給出的示例配置文件照著做一遍。如果哪里英文理解有問題，再照著中文的文檔反復(fù)思考一下。所以我的這篇文章，也有類似翻譯英文官方文檔。因?yàn)槲揖驼f照著文檔操作，然后再把這個(gè)過程按照自己的理解重新整理成文章。

之所以這么做的原因是，一方面要提高自己的英文文檔閱讀和理解能力，另一方面是中文的文檔一般都會更新得比較滯后和有不少錯(cuò)誤，不能光按照中文手冊去做。最后就是肯定要?jiǎng)邮肿约翰僮饕槐榈?，理解起來是一回事兒，操作起來就是另外一回事兒了?/p>

在這個(gè)過程中，主要有一下幾點(diǎn)心得：

后悔沒有早點(diǎn)學(xué)webpack，功能太強(qiáng)大了。

webpack功能和概念真多，感覺一下子學(xué)不完，只能用啥學(xué)啥。先整理出主要內(nèi)容，細(xì)節(jié)一點(diǎn)點(diǎn)學(xué)習(xí)、補(bǔ)充。

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

以下是正文~

概念

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

為了學(xué)習(xí)webpack，需要理解的核心概念：

Entry：入口

Output：輸出

Loaders：loader

Plugins：插件

Mode：模式

Browser Compatibility：瀏覽器兼容

Entry

entry說簡單點(diǎn)，就是沒有打包之前的原文件?？梢灾付ㄒ粋€(gè)文件、可以指定多個(gè)文件或者不同目錄下的文件。如果不指定，默認(rèn)值為：./src/index.js。在配置文件中指定其他文件時(shí)，例如：

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

output屬性告訴webpack在哪里輸出打包好的文件，以及如何命名這個(gè)文件。默認(rèn)情況下是./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配置文件中，需要指定一下兩個(gè)屬性

test：test屬性告訴webpack哪些文件需要被轉(zhuǎn)換。

use：use屬性告訴webpack相應(yīng)的文件使用哪個(gè)loader進(jìn)行轉(zhuǎn)換。

例如：

webpack.config.js

const path = require("path");

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

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

”Hi，webpack編譯器，當(dāng)你發(fā)現(xiàn)任何后綴為.txt的文件時(shí)，請使用raw-loader先轉(zhuǎn)換一下，然后再把轉(zhuǎn)換后的內(nèi)容添加到打包文件中?！?/pre>
Plugins

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


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


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生成一個(gè)HTML文件，這個(gè)文件就是你的應(yīng)用程序。在其中已經(jīng)自動引用好了打包的文件。

Mode

通過設(shè)置mode屬性，可以啟動webpack內(nèi)置的優(yōu)化。你可以指定development、production、none，分別對應(yīng)著不同的環(huán)境。默認(rèn)的是production。例如：


webpack.config.js


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

Browser Compatibility

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



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


（待續(xù)）


相關(guān)文章


webpack入門學(xué)習(xí)手記（一）


webpack入門學(xué)習(xí)手記（二）


webpack入門學(xué)習(xí)手記（三）


webpack入門學(xué)習(xí)手記（四）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99960.html

相關(guān)文章

  • webpack入門學(xué)習(xí)手記（五）

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

    AlphaWatch 評論0 收藏0

  • webpack入門學(xué)習(xí)手記（二）

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

    Joyven 評論0 收藏0

  • webpack入門學(xué)習(xí)手記（四）

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

    ygyooo 評論0 收藏0

  • webpack入門學(xué)習(xí)手記（三）

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

    rozbo 評論0 收藏0

  • Python爬蟲建站入門手記——從零開始建立采集站點(diǎn)（一：環(huán)境搭建）

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

    HackerShell 評論0 收藏0

發(fā)表評論

0條評論

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