[Day 18 - webpack] 模组化开发好帮手 — 打包工具 webpack

为什麽要使用 webpack？

在前一篇文章提到，有愈来愈多开源套件，可以帮助我们加速开发。当功能愈来愈多，将所有程序码都写在同一个 JS 档案中会难以管理。

如果能以模组化的方式进行开发，将程序码拆开成不同的档案，让每个档案各自串联所使用到的程序码或套件，不只可以加速网页载入，也更可以提升专案的维护性。为了在浏览器上达成这样的模组化开发，就有了 webpack 这样的打包工具出现。

webpack

如所说的：Webpack 是一个「打包工具」，将各种模组套件和资源打包成一个档案，让浏览器能够正常编译模组化的程序码。它可以做到：

  • 打包多个 JS 档案变成单一的档案，解决使用多个 JS 档造成变数污染的问题
  • 能够在程序码中使用 import 引入 npm packages
  • 引入任何类型的档案到 JS ，例如：图片档
  • 优化程序码
  • ...

让我们直接用一个范例来演示 webpack 是如何打包的，首先在 test.js ，有一个要在 index.js 使用的函式 test()：

test.js

export default function test() {
  return "hello"
}

index.js

document.getElementById('target').innerText = test();

在 HTML 加入 Script，目前需要同时引入 test.js 才能在 index.js 使用 test()：

index.html

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
    <div id="target"></div>
    <script src="./test.js"></script>
    <script src="./index.js"></script>
</body>
</html>

安装 webpack

透过 npm 安装 webpack、webpack-cli：

npm init
npm install webpack webpack-cli --save-dev

webpack.config.js

设定配置档 webpack.config.js，告诉 webpack 该如何编译和打包程序码：

module.exports = {
  mode: "development",
  entry: "./index.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
};
  • mode：可以设定执行模式为 development 或 production。
  • entry：设定入口文件为 index.js
  • output：输出的相关设定
  • path：指定打包後输出文件的目录
  • filname：打包输出的档名

建立 webpack 的配置档後，修改一下先前的范例，改成直接在 index.js 使用 import 引入 test()。

index.js

import test from './test.js'

document.getElementById('target').innerText = test();

执行 webpack

在 package.json 的 scripts 属性新增执行指令：

"scripts": {
    "start": "webpack"
},

接着就可以输入指令执行 webpack 打包档案罗

npm run start

依照上面视窗显示的执行画面，webpack 会将 index.js 和 test.js 一并打包成指定的档案 bundle.js，这样 HTML 就只要引入这一份程序码，就可以有和之前分别引入两份 script 相同的效果。

index.html

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
    <div id="target"></div>
    <script src="./bundle.js"></script>
</body>
</html>

Loader

在一开始有提到可以引入任何类型的档案，例如：图片档、CSS等等， 而 webpack 会透过 Loader 将这些档案进行预处理，才能成功加载这些文件。

举例来说，要引入的是 CSS 档，首先安装会使用到 style-loader 和 css-loader。并且一样设定配置档，让 webpack 知道该怎麽处理 CSS 类型的档案：

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

webpack.config.js

...,
module: {
  rules: [
    {
      test: /\.css$/,     //结尾是.css的档案
      use: ["style-loader", "css-loader"]
    }
  ]
}

接下来新增 CSS 样式，直接把档案引入 JS：

style.css

body {
    background-color: #ffcccc;
}

index.js

import './style.css';

成功！

小结

希望到这边大家都能了解使用 webpack 的理由，以及如何使用 webpack 进行模组化开发。下一篇文章，就会进入到 React 框架，我们会使用到一些套件，并且用模组化的方式进行开发，那就下章再见罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料


<<:  Day 18 [Python ML、Pandas] 重新命名和整合

>>:  【Day 18】深度学习（Deep Learning）--- Tip（三）

[Day1] Flutter - 简介

前言 Hi, 我是鱼板伯爵本次的教学前面都是基本的元件为主，後面会利用前面所学以DDD(Domain...

Elastic Stack第二十六重

Query DSL Part VII (查询语法) 本篇继续介绍 Query DSL 的 term-...

Day04常用的基本标签(HTML)

常用的标签 先来介绍一些常用的标签 h1、h2、h3、h4、h5、h6 ← 这六个是依序由大到小的标...

第 07 天 不断尝试直到成功( leetcode 106 )

https://leetcode.com/problems/construct-binary-tr...

JS 13 - Getter & Setter

大家好！ 理解完物件继承的方法，就要接续介绍今天的 Getter 和 Setter 了。 我们进入今...