webpack2 入門實戰 1

大家好，我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師，不只要把程式寫完，還要寫好
老師說：選對好工具，事情就完成一半
如果你還在一隻 JS 打完全部程式，一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學，讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪，但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本

npm i webpack@2.2.1 -g

3. 在專案的根目錄放一隻 webpack.config.js
entry：你的主 js 進入點
output.filename：webpack 打包後的檔名
output.path：webpack 打包後的路徑

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

4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理，也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡，我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時，能夠有型別的提示

var name = "milkmidi";
/**
 * @param {number} num1
 * @param {number} num2
 * @return {number}
 */
function add( num1, num2 ) {
    return num1 + num2;
}

/**
 * @return {string} name
 */
function getName() {
    return name;
}
module.exports = { add , getName };

5. 程式進入點 app.js
使用 require 把剛剛寫好的 module 載入(副檔名是js的話，可以不用寫)
就可以使用 module 裡設定好的公開函式
將滑鼠移到 add 函式上，可以看到完整的型別提示

var util = require("./module_exports_util");
console.log("util.add", util.add(1, 1));
console.log("util.getName", util.getName());

6. 打開專案的 terminal , 輸入 webpack
webpack 就會自動抓取預設的 webpack.config.js 來打包你的檔案
打開 bundle.js, 就可以看到 webpack 打包後的程式碼。

7. import , export
除了 require 的寫法, webpack 也支援 es6 的 import, export
這次我們直接在 function 前加入 export 關鍵字
export_util.js

/**
 * @param {number} num1
 * @param {number} num2
 */
export function sub( num1, num2 ) {
    return num1 - num2;
}
/**
 * @param {number} num1
 * @param {number} num2
 */
export function multi( num1, num2 ) {
    return num1 * num2;
}

app.js 新增

如果想一次把 module 裡 export 的函式找出

可以寫

import *as 自定變數 from './export_util';

如果只是單獨的取一個 export 的函式

import {multi} from './export_util';

// impprt
import * as u from "./export_util";
console.log("sub", u.sub(5, 2));

import { multi } from "./export_util";
console.log("multi", multi(6, 2));

個人是比較愛用 import, export 的寫法

問題 ?
那可以 require  + export 嗎?
可以 import + module.exports 嗎 ?
大家可以自己試試看就會知道結果
記得多去看 bundle 後的 js 檔，就會知道原理
轉載請註明出處
Github Source Code