webpack入門學習手記（一）

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

以前用過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入門學習手記（四）