Webpack基本功能理解以及使用

對於前端工程化，webpack一個神奇的工具，既然是個神奇的工具。那咱們保留咱們的好奇心，來聊一聊它，首先咱們要搞清楚webpack究竟是用來解決什麼問題的，而後咱們來看看它究竟是怎麼作的，最後來看看它的一些基本用法，下面就來侃一侃。

什麼是webpack以及webpack的做用 （解決什麼問題）

現在web前端的業務功能愈來愈複雜，實現方式也愈來愈豐富，在web頁面開發過程當中咱們一般會引用不少第三方模塊以及一些拓展語言（stylus，Scss， JSX...）來簡化開發難度，而這些第三方模塊和一些拓展語言瀏覽器不能直接識別，因此要經過通過打包過程生成可讓瀏覽器識別的格式。

就像一幢居民樓，要建起這樣一座居民樓，最基本的材料是磚、瓦、鋼筋、混凝土。而要組合這些材料造成一幢建築，確定是有必定的方法流程以及工具的，好比第一步先搭建地基，後面用塔吊不斷的在地基上疊加完善就造成了一幢建築。在這個過程當中，用到的方法流程以及工具起到的做用就相似於webpack。

進入正題，webpack其實就是一個JavaScript模塊集成工具，同時具備壓縮文件以及優化文件結構的做用。通過webpack打包生成的bundle包，可被瀏覽器識別解析。

在這個過程當中，會用到一些loaders解析工具用來預處理一些模塊以及拓展語言（例如：stylus、Scss...）,這些工具的配置使用都是在webpack中完成的。其中經常使用的loaders工具備：style-loader、 css-loader、 stylus-loader。

webpack實現原理 （怎麼作的）

原理的理解能夠參照上圖。
webpack的最核心的原理： 一、一切皆模塊 二、按需加載。

• 一切皆模塊 webpack會將源程序按照程序結構分割成一個個獨立的小模塊，當須要這些小模塊時，進行組合重構，避免冗餘，達到重複利用。
• 按需加載 傳統的打包工具是將全部模塊編譯生成一個龐大的bundle.js文件，這樣造成的打包文件體積過於龐大，而webpack經過異步加載能夠實現按需加載，減少了打包後的體積。

webpack的使用方法 （怎麼用它）

在使用webpack以前首先要理解四個基本概念：

1. 入口(entry)

webpack要實現打包，首先咱們得指定它的入口，指定入口後，webpack纔會找出那些模塊和庫是入口起點（直接和間接）的依賴。
接下來咱們來看一個最簡單的entry的配置例子。

webpack.base.config.js

module.exports = {
  entry: './src/main.js'
};

2. 出口(output)

出口即配置打包後的輸出文件路徑，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你能夠經過在配置中指定一個 output 字段，來配置這些處理過程：

webpack.base.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),  // 輸出路徑
    filename: 'output.bundle.js'  // 輸出文件名
  }
};

3. loader

loader可以將非JavaScript文件轉化爲webpack識別的JavaScript文件，好比講圖片轉化爲JavaScript可調用的格式，或者將一些擴展語言文件轉化爲瀏覽器可識別的文件格式。
本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。
在更高層面，在 webpack 的配置中 loader 有兩個目標：

• test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
• use 屬性，表示進行轉換時，應該使用哪一個 loader。

webpack.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

4. 插件(plugins)

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的一個實例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

其餘一些詳細用法能夠參考webpack官方文檔。

參考： webpack中文文檔

本文基於本身學習網絡中的webpack整理的一份基本概念文檔，是本身對於webpack使用的理解總結，若有問題，煩請評論指正，共同窗習，共同進步。😁😁😁😁