Webpack 與 Module 模組化 JS

5 min readMar 16, 2019

來認識兩個我大 JS 共榮圈的重要推手

無庸置疑的 Javascript 是最多人使用的語言，NodeJS 的崛起讓前後端分離更加容易，模組化 JS 讓後端套件封裝給前端瀏覽器使用，是建立這大 JS 共榮圈的重要信仰，而 webpack 與 module 正好解決了這一點，在提到 webpack 前先來看看 module。

module

提到 webpack 就先得了解什麼是 JS modules，下面的程式碼是 module 的例子

CommonJS

let moduleA = require(‘./a.js’)
module.exports = () => {}

module 讓原本大量使用 closure 去做封裝的JS有了更好的方法模組化程式碼，在 module 內做程式實作最後 exports 內做 interface 讓其他JS可以引用

Asynchronous Module Defintion

簡稱 AMD，使用非同步的方法載入模組，能夠在瀏覽器上解決 CommonJS 所帶來的同步問題

define(‘MouseCounterModule’, [‘jQuery’], $ => {
 let numClicks = 0;
 
 const handleClick = () => 
 console.log(++numClicks);
 
 return {
 countClick: () =>
 $(document).on(‘click’, handleClick);
 }; 
});

AMD define()，裡面分別有三個參數模組名稱，
1. module_id
2. [dependencies]
3. definition function /*function for instantiating the module or object*/

AMD require()，引用後面帶的是該模組的回調函式

require([‘MouseCounterModule’], mouseCounterModule =>
 mouseCounterModule.countClick();
);

es6

結合 Common 與 AMD 優點 ES6 module 使用了 import 與 export 來做模組化的關鍵字，其中import 可以做非同步的效果也可以同步

import {moduleA} from ‘./a.js’
export default () => {}

而瀏覽器的 module 如何與 nodejs 的 npm 結合，就是今天要講的 webpack

webpack

webpack是一個模組整合的工具，把要運行於瀏覽器端的 module 打包成瀏覽器可以執行的檔案

核心概念

1. 入口(entry)
2. 输出(output)
3. loader
4. 插件(plugin)
5. 模式(mode)
6. 浏览器兼容性(browser compatibility)

如果你需要…..

1. 將你的 js 檔案 Bundle 變成單一的檔案
2. 在你的前端程式碼中使用 npm packages
3. 撰寫 JavaScript ES6 或 ES7（需要透過 babel 來幫助）
4. Minify 或優化程式碼
5. 將 LESS 或 SCSS 轉換成 CSS
6. 使用 HMR（Hot Module Replacement）
7. 包含任何類型的檔案到你的 JavaScript

你就必須使用webpack!!

基本起手式

先建立五個檔案

webpack.config.js
src/index.js
src/module.js
index.html
dist/bundle.js

entry & output

起手入口點與出口點，將index.js做打包，index.js會是所有module.js的集合

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    { loader: 'sass-loader' }
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({ template: './src/index.html' })
    ]
}

2. loader
舉凡 scss、pug 等其他檔案文件需要做轉譯的文件，可以透過 loader 重新編譯

3. plugin
透過 plugin 可以引用第三方的插件去加工我們 webpack 過程

4. mode
開發者與生產者模式，當處於開發者模式可以使用 webpack-dev-server 去看你部屬後的網站長啥樣子，也能額外使用 hot module replacement 模塊熱替換節省你的開發時間，而生產者模式打包後的檔案會自動幫你 minify 不用額外設定。

5. browser compatibility
webpack 支持所有es5的瀏覽器， webpack 的 import() 和 require.ensure() 需要 Promise。但如果你需要使用更舊的就得用 polyfill

Webpack 與 Module 模組化 JS

module

webpack

Written by PY