本人微信公眾號：前端修煉之路，歡迎關注。
之前用過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官方文件的指南手冊，敬請關注。
（待續）
相關文章