怎么掌握webpack

本篇內容介紹了“怎么掌握webpack”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

什么是webpack？

一句話概括：webpack是一個模塊打包工具（module bundler）。重點在于兩個關鍵詞“模塊”和“打包”。什么是模塊呢？我們回顧一下曾經的前端開發方式，js文件通過script標簽靜態引入，js文件之間由于沒有強依賴關系，如果文件1要用到文件2的某些方法或變量，則必須將文件1放到文件2后面加載。隨著項目的增大，js文件之間的依賴關系越發錯綜復雜，維護難度也越來越高。這樣的困境驅使著前端工程師們不斷探索新的開發模式，從后端、app的開發模式中我們獲得靈感，為什么不能引入“模塊”的概念讓js文件之間可以相互引用呢？模塊1要使用模塊2的功能，只需要在該模塊1中明確引用模塊2就行了，而不用擔心它們的排列順序?；谶@種理念，CommonJS和 AMD規范被創造了出來，然后有了require.js、system.js這樣的前端模塊加載工具和node的模塊系統，直到現在流行的es6 module。

模塊的引入解決了文件之間依賴引用的問題，而打包則解決了文件過多的問題。當項目規模增大，模塊的數量數以千計，瀏覽器如果要加載如此多的文件，頁面加載的速度勢必會受影響，而bundler可以把多個關聯的文件打包到一起從而大量減少文件的數量提高網頁加載性能。提供模塊化的開發方式和編譯打包功能就是webpack的核心，其他很多功能都圍繞它們展開。

核心概念

Module（模塊）

對于webpack，模塊不僅僅是javascript模塊，它包括了任何類型的源文件，不管是圖片、字體、json文件都是一個個模塊。Webpack支持以下的方式引用模塊：

•  ES2015 import 方法

•  CommonJs require() 方法

•  AMD define 和 require 語法

•  css/sass/less文件中的 @import 語法

•  url(...) 和　<img src=...> 中的圖片路徑

Dependency Graph（依賴關系圖）

所謂的依賴關系圖是webpack根據每個模塊之間的依賴關系遞歸生成的一張內部邏輯圖，有了這張依賴關系圖，webpack就能按圖索驥把所有需要模塊打包成一個bundle文件了。

Entry（入口）

繪制依賴關系圖的起始文件被稱為entry。默認的entry為 ./src/index.js，或者我們可以在配置文件中配置。entry可以為一個也可以為多個。

單個entry：

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

或者

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

多個entry，一個chunk

我們也可以指定多個獨立的文件為entry，但將它們打包到一個chunk中，此種方法被稱為 multi-main entry，我們需要傳入文件路徑的數組：

module.exports = {    entry: ['./src/index.js', './src/index2.js', './src/index3.js']  }

但是改種方法的靈活性和擴展性有限，因此并不推薦使用。

多個entry，多個chunk

如果有多個entry，并且每個entry生成對應的chunk，我們需要傳入object：

module.exports = {    entry: {      app: './src/app.js',      admin: './src/admin.js'    }  };

這種寫法有***的靈活性和擴展性，支持和其他的局部配置（partial configuration）進行合并。比如將開發環境和生產的配置分離，并抽離出公共的配置，在不同的環境下運行時再將環境配置和公共配置進行合并。

Output（出口）

有了入口，對應的就有出口。顧名思義，出口就是webpack打包完成的輸出，output定義了輸出的路徑和文件名稱。Webpack的默認的輸出路徑為 ./dist/main.js。同樣，我們可以在配置文件中配置output：

module.exports = {    entry: './src/index.js',    output: {      path: __dirname + '/dist',      filename: 'bundle.js'    }  };

多個entry的情況

當有多個entry的時候，一個entry應該對應一個output，此時輸出的文件名需要使用替換符（substitutions）聲明以確保文件名的唯一性，例如使用入口模塊的名稱：

module.exports = {    entry: {      app: './src/app.js',      search: './src/search.js'    },    output: {      filename: '[name].js',      path: __dirname + '/dist'    }  }

最終在 ./dist 路徑下面會生成 app.js和search.js兩個bundle文件。

Loader（加載器）

Webpack自身只支持加載js和json模塊，而webpack的理念是讓所有的文件都能被引用和加載并生成依賴關系圖，所以loader出場了。Loader能讓webpack能夠去處理其他類型的文件（比如圖片、字體文件、xml）。我們可以在配置文件中這樣定義一個loader：

webpack.config.js

module.exports = {    module: {      rules: [        {           test: /\.txt$/,           use: 'raw-loader'         }      ]    }  };

其中test定義了需要被轉化的文件或者文件類型，use定義了對該文件進行轉化的loader的類型。該條配置相當于告訴webpack當遇到一個txt文件的引用時（使用require或者import進行引用），先用raw-loader轉換一下該文件再把它打包進bundle。

還有其他各種類型的loader，比如加載css文件的css-loader，加載圖片和字體文件的file-loader，加載html文件的html-loader，將***JS語法轉換成ES5的babel-loader等等。完整列表請參考 webpack loaders。

Plugin（插件）

Plugin和loader是兩個比較混淆和模糊的概念。Loader是用來轉換和加載特定類型的文件，所以loader的執行層面是單個的源文件。而plugin可以實現的功能更強大，plugin可以監聽webpack處理過程中的關鍵事件，深度集成進webpack的編譯器，可以說plugin的執行層面是整個構建過程。Plugin系統是構成webpack的主干，webpack自身也基于plugin系統搭建，webpack有豐富的內置插件和外部插件，并且允許用戶自定義插件。官方列出的插件有 這些。

與loader不同，使用plugin我們必須先引用該插件，例如：

const webpack = require('webpack'); // 用于引用webpack內置插件  const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件  module.exports = {    plugins: [      new webpack.HotModuleReplacementPlugin(),      new HtmlWebpackPlugin({template: './src/index.html'})    ]  };

實踐

了解webpack的基本概念之后，我們通過實踐來加深理解。接下來，我們使用webpack搭建一個簡易的react腳手架。

創建項目

首先創建react-webpack-starter項目并使用 npm init 初始化。

安裝依賴

安裝react

npm i react react-dom

安裝webpack相關

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader

安裝webpack-cli后可以在命令行中執行webpack命令；webpack-dev-server提供了簡易的web服務器，并且在修改文件之后自動執行webpack的編譯操作并自動刷新瀏覽器，省去了重復的手動操作；html-webpack-plugin用于自動生成index.html文件，并且在index.html中自動添加對bundle文件的引用；style-loader和css-loader用于加載css文件。

安裝babel相關

由于react中使用了class, import這樣的es6的語法，為了提高網站的瀏覽器兼容性，我們需要用babel轉換一下。

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

其中@babel/core是babel的核心模塊，包含了babel的核心功能；@babel/preset-env支持轉換ES6以及更新的js語法，并且可根據需要兼容的瀏覽器類型選擇加載的plugin從而精簡生成的代碼；@babel/preset-react包含了babel轉換react所需要的plugin；babel-loader是webpack的babel加載器。

配置webpack

在項目根目錄下面新建webpack.config.js，內容如下：

webpack.config.js

const path = require('path');  const HtmlWebpackPlugin = require('html-webpack-plugin');  module.exports = {    entry: './src/index.js',    output: {      path: path.resolve(__dirname, 'dist'),      filename: 'bundle.js'    },    module: {      rules: [        {          test: /\.js$/,          exclude: /node_module/,          use: 'babel-loader'        },        {          test: /\.css$/,          use: ['style-loader', 'css-loader'] // 注意排列順序，執行順序與排列順序相反        }      ]    },    plugins: [      new HtmlWebpackPlugin({        template: './src/index.html'      })    ]  }

其中HtmlWebpackPlugin使用自定義的模版來生成html 文件，模版的內容如下：

./src/index.html

<!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>My React App</title>  </head>  <body>    <div id="app"></div>  </body>  </html>

配置babel

在項目根目錄下面新建.babelrc文件，配置我們安裝的兩個babel preset：

.babelrc

{    "presets": [      "@babel/preset-env",      "@babel/preset-react"    ]  }

生成react應用根節點

./src/index

import React from 'react';  import ReactDOM from 'react-dom';  import App from './components/App';  ReactDOM.render(<App />, document.getElementById('app'));

./src/component/App.js

import React, { Component } from 'react';  import './App.css';  export default class App extends Component {    render() {      return (        <div>          my react webpack starter        </div>      )    }  }

./src/components/App.css

body{    font-size: 60px;    font-weight: bolder;    color: red;    text-transform: uppercase;  }

配置 package.json

***，在package.json文件里面加上兩個scripts，用來運行開發服務器和打包：

package.json

"scripts": {    "start": "webpack-dev-server --mode development --open --hot",    "build": "webpack --mode production"  }

注意，我們啟用了webpack-dev-server的模塊熱更新功能（HMR），進一步提高我們的開發效率。

到此一個最簡版本的react腳手架就搭建完成了，我們運行一下看看效果：

“怎么掌握webpack”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！