話說前頭
-
webpack前段時間有聽說一下，現在已經到了3.x的版本，自己沒去接觸。因為之前使用gulp來作為自己的項目構建工具。現在感覺gulp使用的趨勢在減少。現在這段時間去接觸了webpack，感覺很不錯，它的模塊化打包機制，對前端開發和性能方面都帶來好處。這里不是說gulp不好，兩者不作比較
-
接下來會說說自己對webpack使用的感受，我不會一步步寫出使用webpack的流程，因為關於webpack的教程有很多，但會寫一些關鍵地方，注意地方，來加深對webpack的見解。
-
學習就是這樣，東看看西看看，看人家的對某件東西的見解，加上自己的理解，是否異同，慢慢積累，最終成為自己的知識。
webpack介紹
1.（引用了webpack官網的一句話）：
webpack 是一個現代 JavaScript 應用程序的模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成少量的 bundle - 通常只有一個，由瀏覽器加載。
它是高度可配置的，但是，在開始前你需要先理解四個核心概念：入口(entry)、輸出(output)、loader、插件(plugins)。
2.個人理解：
這里說了這么多就是它能把項目中資源文件看成一個個模塊，然后將他們打包成少量或一個文件，然后我們去引用這文件。
3.疑惑：
大家這里可能會疑惑，當時我也想，怎么能做到這個？怎么就打包成一個文件了？那么js，css，圖片什么的怎么搞？還有這種操作？我能怎么辦，那只能選擇相信它。
4.感受：
其實學習某一樣工具，我們只需要知道這東西能做什么，然后怎么用它，但它具體實現的細節，有時我們不必深究。我們只需知其然，不必知其所以然。盡管去用這個東西，它本來就是一個工具。就好比開一輛車，我們只需去學習怎么開，而不用太在意他為什么能開，開多了一樣成為老司機，不是嗎，沒毛病吧。工具它能給我們帶來便利，就足夠了。除非你是制造工具的。但是如果對webpack非常感興趣，可以去它的github上看看。
webpack能做的事：
上面說webpack能打包模塊，其實還有很多功能。
- webpack可以對Js進行轉譯，當前瀏覽器很多不支持es6，但是我們想使用es6的語法，webpack可以將es6語法轉成es5語法
- webpack可以對less，sass，stylus等css的預處理語言進行轉譯
- webpack可以熱更新
- webpack可以對圖片處理，壓縮，轉成base64格式。
- webpack可以對代碼進行壓縮。
- webpack可以進行語法檢查，可以生成自動化html模板等等
上面舉例是常用，其功能還多得多。都是通過webpack 的 loader和plugins實現的，可以說是很強大了。
webpack安裝：
- 前提有nodejs和npm，在網上搜索安裝，現在的nodejs都會帶有npm，所以直接安裝nodejs即可。
- 通過 cmd（用的是win操作系統）運行：node -v 和 npm -v 若都能返回版本號表明安裝成功。
- 接着正式安裝webpack,命令行中運行：
//全局安裝
npm install -g webpack
//創建一個文件夾
mkdir webpack-demo
//進入項目中
cd webpack-demo
//初始化，生成默認package.json 文件
npm init -y
//在當前項目中安裝webpack
npm install webpack --save-dev
//到這里就安裝成功了
感受：整個流程和安裝gulp差不多，是npm模塊的那套安裝流程。
說到npm，在國內推薦使用cnpm淘寶鏡像，很不錯，速度快很多。還有可以逛npm的官網去查詢自己想要看的模塊，里面都有模塊的詳細介紹。
webpack的關鍵文件:webpack.config.js
- webpack.config.js是webpack的配置文件，對項目中的webpack進行配置。
- 文件中用到的插件和loader需要先試用npm安裝好：
// 安裝css-loader
npm install css-loader --save-dev
// 安裝htmlWebpackPlugin
npm install html-webpack-plugin --save-dev
- 項目根目錄新建簡單的webpack.config.js文件：
//引入模塊
const webpack = require('webpack');
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
//配置
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
-
這個文件中關鍵的東西就是上述提到的：四個核心概念：入口(entry)、輸出(output)、loader、插件(plugins)。弄懂這四個核心的東西，webpack也就懂得差不多了，起碼懂得怎么用。
-
各大核心的作用：
- entry： 入口文件，也就是想要被打包的文件，這里可以是一個或者多個。
- output： 輸入文件，表示打包后的文件將會被輸出到哪里，可以一個或多個。
- module：模塊，里面的rules是一個數組，存放則項目中需要用到的loader，loader可以對資源文件進行一系列的處理。常見的loader：style-loader，css-loader，less-loader，babel-loader，url-loader等等。
- plugins：插件，為webpack添加所需的功能，如例子里面的是自動生成html模板插件。
更多細節在webpack的官網上查看。
最后再說說：
- 本次文章主要說說自己使用webpack時的一些想法和收獲，可能寫得不是很好，但這是個學習的過程，我很享受。
- 再提提，以前我不怎么喜歡去看一些官方的文檔，因為全都是英文，自己英語也不是很好。但是后來硬着頭皮看，發現在文檔中學到的東西很多，也更有助於理解，有的文檔寫得很詳細，會懂得很多。這過程中不會的英語單詞就去查，順便就補補英語，其實挺好。通過自己看文檔，然后能用，能做，心里美滋滋。