本人公衆號：前端修煉之路，歡迎關注。
之前用過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官方文檔的指南手冊，敬請關注。
（未完）