wepack究竟是什麼（使用篇）

最近在研究webpack，關於webpack鄙人計劃寫三篇文章：

• wepack的使用
• wepack的優化方案
• 試讀wepack的源碼分析其原理

其目的就是爲了寫下來印象深入，理解通透，固然方便日出本身的查看，固然鄙人能力有限，也但願各位給出寶貴的意見，歡迎拋磚~~

webpack 是什麼？

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。

構建就是把源代碼轉換成發佈到線上的可執行 JavaScrip、CSS、HTML 代碼，包括以下內容。

代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。 文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等。 代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載。 模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要構建功能把模塊分類合併成一個文件。 自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器。 代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過。 自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。 構建實際上是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力，解放了咱們的生產力。

Ready？ GO

mkdir webpack-start
cd webpack-start
npm init
複製代碼

而後繼續，配置webpack (時間就是金錢，建議使用cnpm，固然土豪能夠忽略~)

npm install webpack webpack-cli -D
複製代碼

• 建立src

• 建立dist

  • 建立index.html

• 建立文件webpack.config.js

• 配置文件webpack.config.js

  • entry：配置入口文件的地址
  • output：配置出口文件的地址
  • module：配置模塊,主要用來配置不一樣文件的加載器
  • plugins：配置插件
  • devServer：配置開發服務器

webpack.config.js

let path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {},
  plugins: []
}
複製代碼

在src文件夾建立 index.js 和 b.js 個人目錄結構：

而後當前命令行輸入：

npx webpack --mode development
複製代碼

執行後，dist多一個bundle.js，哇成功了，，這個就是咱們的webpack打包文件

透徹一點，咱們看看webpack到底作了什麼？

(function(modules) {
  ... //此處省略 
})({
  "./src/b.js": (function(module, exports, __webpack_require__) {

    eval("咱們的代碼");
    
    /***/ })
    
    /******/ }),
    "./src/index.js": (function(module, exports, __webpack_require__) {

      eval("咱們的代碼");
      
      /***/ })
      
      /******/ }),

})
複製代碼

能夠看出，傳進去的modules 就是一個對象，其中咱們js路徑做爲key ： val是相對應的value

函數裏面就是webpack作的處理，其實裏面主要是聲明瞭一個 require方法__webpack_require__， 1，首先判斷緩存裏是否已經有了，表示模塊加載過了，直接返回 2，建立一個新的模塊 ---而且放到緩存----執行模塊函數----標記模塊爲加載過的 ----返回模塊的導出對象

瞭解基本原理，來，咱們開始幹大事了~~

配置開發服務器

npm i webpack-dev-server –D
複製代碼

在webpack.config.js文件中配置一下，

contentBase: path.resolve(__dirname, 'dist'),
    host: "localhost",
    compress: true,
    port: 6039,
複製代碼

值得注意的是，webpack編譯後的產出文件（本案例的bundle.js）是在內存的，打包後刪除文件bundle.js，仍是能夠訪問的 後面會繼續更新

• 支持加載css文件
• 自動產出html
• 編譯less 和 sass
• 處理CSS3屬性前綴
• 轉義ES6/ES7/JSX
• 服務器代理