Webpack最佳入門實踐

語言: CN / TW / HK

一.洪水猛獸webpack?

  • 從一個新手的角度去想象webpack

    • 我們知道的主流框架是vue,react,a..那啥

    • 好吧,現在一般都是vue和react

    • 所以,如果是前端三項之力的話,我們會説

      • Vue
      • React
      • Webpack
  • 就是感覺webpack其實挺重要的

    Webpack so easy
    
  • 言歸正傳:

作為一個javascript前端開發者,肯定都知道webpack這個東西,也知道各種各樣的module。webpack作為一個打包工具,就是將各種各樣的模塊捆綁(打包)在一起。支持的module有:

  • CommonJS

  • AMD

  • CSS import

  • Images url

  • Es module

webpack將所有模塊捆綁在一起,使其運行。

二.重要概念

  • webpack其實就是控制五個模塊,它們分別是

入口文件(entry point)

  • webpack工作開始的地方,就是一個js文件

  • 可以收集其他模塊文件

  • 最後將所有模塊文件打包到一起,形成一個可運行的代碼

  • 入口文件默認是 src/index.js

輸出文件(output)

  • outout 就是webpack通過build過程打包後形成的文件。

  • 默認的輸出文件夾為根目錄下的 dist/ 文件夾

加載器(loaders)

  • loaders 是一些第三方擴展包

  • 可以幫助webpack處理加載各種類型的文件。

    • 如處理css,image文件的loaders
    • vue,react的loaders
    • 如果沒有loaders,webpack本身是不支持css文件,vue,react文件的

插件(plugins)

  • plugins 也是第三方插件,它可以改變 webpack的工作方式

    • 例如有些插件可以設置webpack的環境變量

模式(mode)

  • webpack有兩種工作方式

    • development(開發模式)
    • production(生產模式)
  • 主要的區別就是在 production 模式下

    • 產生的捆綁包文件更小,去掉了在運行下無關的註釋,空格等等
    • 這樣可以加快用户加載代碼的速度
  • 所以,這裏有一個小問題,就是loaders和plugins有區別嗎?

    • 在我看來,loaders是編譯時候用一下,plugins則是可以一直使用,我覺得大概是這樣吧
  • 看到這裏,大家也瞭解到了為什麼webpack的地位如此之高!

    • 可以統一不同的代碼並打包
    • 而且過程中可以把不必要的代碼幹掉

webpack實踐

初始化項目

  • 首先新建一個目錄 npm init -y

    • 你就是看見創建了一個 package.json
  • 添加一條 start 腳本

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start":"webpack"
  },
複製代碼
  • 安裝相應的依賴

    webpack webpack-cli webpack-dev-serve
    yarn add webpack webpack-cli webpack-dev-serve
    
  • 然後就可以運行剛才編寫的 start 命令了

    • yarn start
  • 和你想的一樣,啥也沒有打包會報錯的

    • src/index.js創建一個index.js文件

      • 內容就 console.log("hello webpack!");
  • 再次運行 yarn start 會有一個 warning

    • webpack 正常運行並生成了一個 dist 文件夾

    • dist 就是 webpack 的輸出文件

    • 但是有 warning ,是因為沒有指定模式

      production
      
"start": "webpack --mode development"
複製代碼

webpack配置文件,指定輸入輸出

前面提到,我們可以更改webpack的配置的。為了配置webpack,我們需要一個 webpack.config.js 文件。

  • 首先更改入口文件和出口文件:

    • // webpack.config.js
      const path = require("path");
      module.exports = {
          // 將入口文件指定為main.js
          entry: {index: path.resolve(__dirname, "src", "main.js")},
          // 將輸出文件目錄改為build/
          output: {
              path: path.resolve(__dirname, "build")
          }
      };
      複製代碼
    • entry字段可以用來修改入口文件,上面的代碼將webpack入口文件改為 src/main.js
    • output字段用於修改輸出文件位置,我們將輸出文件目錄改為 build/
    • 將src目錄下的 index.js 文件重命名為 main.js ,運行start命令,可以看到webpack輸出目錄build。

添加html頁面

為了將webpack打包後的文件,用script標籤嵌入到html文檔中,我們需要藉助第三方plugins擴展 html-webpack-plugin

  • 上面介紹過plugin,是改變webpack工作方式的第三方擴展

  • html-webpack-plugin的作用就是改變webpack的工作方式

  • 使webpack打包後的js文件,添加到html頁面的script標籤中,這樣打開html就可以運行我們的js腳本了

  • 1.首先安裝插件
yarn add html-webpack-plugin --dev
複製代碼
  • 2.然後在 config文件 中使用插件
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // 將入口文件指定為main.js
  entry: { index: path.resolve(__dirname, "src", "main.js") },
  // 將輸出文件目錄改為build/
  output: {
    path: path.resolve(__dirname, "build"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
  ],
};
複製代碼
  • 上面的代碼指示webpack加載 public/index.html ,所以創建public目錄,並添加 index.html 文件,內容如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello webpack!</div>
</body>
</html>
複製代碼

看一下 打包後的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="index.js"></script>
</head>
<body>
    <div>hello webpack!</div>
</body>
</html>
複製代碼
  • 我們可以看到打包後的js文件已經通過 script標籤 加到了html中

通過webpack啟動本地服務

作為開發者,肯定會用到本地服務,webpack提供了 development server ,可以很方便的啟動一個本地服務,方便開發者進行開發工作

  • 1.首先我們需要安裝webpack-dev-server包
yarn add webpack-dev-server --dev
複製代碼
  • 2.我們更改 package.json 中的命令如下:
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "buildDev": "webpack --mode development",
    "start":"webpack serve --mode development"
  },
複製代碼
  • 打包命令為 buildDev

  • 本地運行為 start

  • 執行 yarn start ,會在本地 8080端口 啟動一個本地服務。

    • 打開可以顯示 index.html 頁面

我們再來説説loader

  • 在前面我們提到了plugin的實踐

    • 那和它有些相似的loader如何使用呢?
  • 以css文件為例

    • 1.我們先安裝樣式的loader
    • npm install css-loader style-loader --save-dev
      複製代碼
    • 然後配置loader即可
    • module: {
          rules: [
            {
              test: /.css$/,
              use: ["style-loader", "css-loader"],
            },
          ],
        },
      複製代碼
  • 是不是也很簡單

    • 這樣配置後,寫的css文件也可以被編譯打包了
    • 那麼,我們就對webpack的模塊都有了一個簡單的實踐了

提問區域

  • 為什麼有的安裝使用了 -dev 有的沒有呢?

    • 加了-dev表示這些包只在開發模式中使用,方便開發工作,在生產環境下並沒有作用