webpack 學習筆記：上手就來

zhangbao發表於2020-09-26
Web筆記

簡單介紹

webpack 是現在最流行的前端專案打包工具，官網地址 webpack.js.org/ 。這個系列的學習筆記，是基於最新的 webpack 4.x 版本。

訪問官網，首先看到的就是下面這張圖。

webpack 學習筆記：上手就來

webpack 做的就是把前端專案中使用的指令碼、樣式和圖片等資源，統一打包、處理成可以直接使用的靜態資源。

想一下：一個稍有規模的前端專案，為了重用和維護考慮，可能會被拆分成若干個程式碼片段和資源目錄，人為管理各個資源的引入和依賴關係非常麻煩，而且也容易出錯；而 webpack 能分析專案中各個資源間的依賴關係，建立起一個依賴圖，確保這種複雜的依賴圖，最終能被毫無錯誤的打包在一起，處理成可以直接使用的靜態資源。這是打包工具最基礎的功能。

另外，webpack 還提供了 plugin 和 loader 的機制，能實現 ES6+ 程式碼轉 ES5、CSS 前處理器（比如 Sass）、HTML 模板、圖片 base64 嵌入、檔案壓縮、程式碼拆分、tree shaking 等功能。

快速上手

白看不如一練，我們同樣照著官網上的貼的例子快速上手一下。

webpack 學習筆記：上手就來

一、初始化專案

$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y
# 下載必要依賴
$ npm install webpack webpack-cli --save-dev

二、搭建專案骨架

webpack-demo/
│  page.html
│  webpack.config.js
│
└─src
        bar.js
        index.js

三、編寫內容

src/index.js:

import bar from './bar'

alert(bar())

src/bar.js:

export default function hello() {
    return `hello, here's your first bundle file!`
}

webpack.config.js:

const path = require('path');

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

page.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, webpack!</title>
</head>
<body>
    <h1>Hello, webpack!</h1>
    <script src="./dist/bundle.js"></script>
</body>
</html>

四、打包專案

$ npx webpack

Hash: 9cd3da7ad4499a9395d1
Version: webpack 4.44.2
Time: 65ms
Built at: 2020-09-25 11:49:10 ├F10: PM┤
    Asset       Size  Chunks             Chunk Names
bundle.js  998 bytes       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.js + 1 modules 159 bytes {0} [built]
    | ./src/index.js 41 bytes [built]
    | ./src/bar.js 118 bytes [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

最終我們得到了 /dist/bundle.js 這個打包檔案（因為未指定“mode”，預設啟用了生產環境打包行為）。

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),alert("hello, here's your first bundle file!")}])

現在瀏覽器開啟。

webpack 學習筆記：上手就來

完成！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章