前端模塊化工具--webpack學習心得

話說前頭

• 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安裝：

1. 前提有nodejs和npm，在網上搜索安裝，如今的nodejs都會帶有npm，因此直接安裝nodejs便可。
2. 經過 cmd（用的是win操做系統）運行：node -v 和 npm -v 若都能返回版本號代表安裝成功。
3. 接着正式安裝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也就懂得差很少了，起碼懂得怎麼用。

• 各大核心的做用：

1. entry： 入口文件，也就是想要被打包的文件，這裏能夠是一個或者多個。
2. output： 輸入文件，表示打包後的文件將會被輸出到哪裏，能夠一個或多個。
3. module：模塊，裏面的rules是一個數組，存放則項目中須要用到的loader，loader能夠對資源文件進行一系列的處理。常見的loader：style-loader，css-loader，less-loader，babel-loader，url-loader等等。
4. plugins：插件，爲webpack添加所需的功能，如例子裏面的是自動生成html模板插件。
   更多細節在webpack的官網上查看。

最後再說說：

• 本次文章主要說說本身使用webpack時的一些想法和收穫，可能寫得不是很好，但這是個學習的過程，我很享受。
• 再提提，之前我不怎麼喜歡去看一些官方的文檔，由於全都是英文，本身英語也不是很好。可是後來硬着頭皮看，發如今文檔中學到的東西不少，也更有助於理解，有的文檔寫得很詳細，會懂得不少。這過程當中不會的英語單詞就去查，順便就補補英語，其實挺好。經過本身看文檔，而後能用，能作，內心美滋滋。