webpack學習記錄

本章內容：

1. webpack是什麼
2. 爲何要使用webpack
3. 怎麼配置webpack
4. 如何使用webpack命令

1. webpack是什麼？

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器

特性：

• 默認：默認只能處理JavaScript，其餘類型文件須要配置loader或者plugins進行處理。
• 打包：將各個依賴文件進行梳理打包，造成一個JS依賴文件。
• 功能強大，loader和plugins能夠根據我的須要隨意配置。例如將es6轉成es5的，將less、sass轉成css等。

2.爲何要使用webpack

2.1沒有打包的困擾

假設咱們有三個js文件，瀏覽器須要發送三次http請求來獲取這三個文件，而後依次執行其中的代碼，若是其中有一個文件由於網絡問題而延誤了時間，那麼整個頁面的顯示也會被延誤。3個文件還好，而當咱們的項目逐漸變大，有幾十個到上百個JavaScript文件的時候，那問題會更嚴重。

若是咱們能把這三個文件合成一個文件這樣是否是就行了？的確只有一個文件的話會減小http請求次數，加快渲染速度，而且打包的過程還能壓縮代碼體積。webpack在打包過程當中，會分析各個文件之間的依賴關係，而後生成一個依賴圖並用文件的形式保存下來，將來瀏覽器運行代碼的時候就能夠讀取這個文件，就知道了各個代碼塊之間的關聯以及如何調用了。

2.2支持模塊化

除此以外webpack還支持模塊化，咱們能夠將一個複雜的系統拆分紅各個模塊。增長代碼的封裝性和重用性。在模塊中咱們只須要將要共享的變量或者函數導出，並在須要的地方導入。

2.3 webpack的打包過程

1. 從入口文件開始，分析整個應用的依賴樹
2. 將每一個依賴模塊包裝起來，放到一個數組中等待調用
3. 實現模塊加載的方法，並把它放到模塊執行的環境中，確保模塊間能夠互相調用
4. 把執行入口文件的邏輯放在一個函數表達式中，並當即執行這個函數

3.怎麼配置webpack

參考 webpack中文網

webpack的核心模塊：

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugins)

3.1 安裝

全局安裝webpack
npm install webpack webpack-cli –g

3.2 webpack配置

在 webpack 4 中，能夠無須任何配置使用，然而這些通用的配置可能不適合咱們的項目，咱們就能夠在 webpack.config.js文件中定製個性配置。

webpack.config.js位置以下：

3.3 entry

entry用來配置哪些模塊做爲入口，也就是說從哪一個文件開始打包。

webpack.config.js單文件入口：

module.exports = {
     entry: './path/to/my/entry/file.js'  //入口文件路徑
    };
複製代碼

webpack.config.js多文件入口：

const path = require('path');
    
module.exports = {
     entry: {
         index:'./src/index.js',
         hello:'./src/hello.js'
    }
},`
複製代碼

3.4 output

output用來指定你打包好的文件要放在哪，以及如何命名這些文件。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',  //輸出文件名
    path: path.resolve(__dirname, 'dist')  //存放文件夾路徑
  },
}
複製代碼

這時你在終端輸入webpack開始打包

看到以下操做就說明你打包成功

這時dist中的main.js就是你打包好的文件

3.5 loader

loader可以將非js文件轉化成js文件（webpack只能打包js文件），而後利用webpack的打包功能對其進行打包。
loader有兩個重要屬性

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

舉例：css-loader

1.首先安裝css-loader和style-loader

npm install --save-dev css-loader style-loader

2.在index.js中引入index.css(隨你怎麼寫樣式)

3.配置webpack.config.js文件

const path = require('path');
    
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js', 
    path: path.resolve(__dirname, 'dist') 
  },
  module: {
    rules: [
    { 
        test: /\.css$/,    //這裏使用正則來匹配css文件
        use:['style-loader','css-loader', ]  
    }
    ]
 },
}
複製代碼

3.6 plugins

plugins目的在於解決loader沒法實現的其餘事，從打包優化和壓縮，到從新定義環境變量，功能強大到能夠用來處理各類各樣的任務。

使用plugins也很簡單，分爲三步：

1. 安裝使用的plugins
2. 首先require對應模塊
3. 在plugins中new 模塊（）

舉例html-webpack-plugin：（做用是打包html文件）

首先仍是先安裝html-webpack-plugin
npm i html-webpack-plugin --save-dev

配置 webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//1.先引入對應模塊
    
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js', 
    path: path.resolve(__dirname, 'dist') 
  },
  module: {
    rules: [
    { 
        test: /\.css$/,    //這裏使用正則來匹配css文件
        use:['style-loader','css-loader', ]  
    }
    ]
 },
 plugins: [
     new HtmlWebpackPlugin({   //2.new HtmlWebpackPlugin()
       template: './index.html',  //html文件所在路徑
       filename: './main.html'    //輸出文件名
    })
 ]
}
複製代碼

4.如何使用webpack命令

1.最簡單的就是在終端中輸入webpack

2.能夠在package.json文件中配置經常使用的命令
在scripts模塊中配置了build命令，輸入npm run build後webpack會按照webpack.config.js中的配置對文件進行打包。