GT Pack – 私藏的 Webpack 整合簡化模組。

嗨，大家好久不見。

筆者最近正朝著萬能的全端開發者邁進，而最近遇到了一個棘手的問題，就是使用 Webpack 時的各種麻煩事，所以我與我的好夥伴好朋友 Single Zero 就一起弄了這一個整合包模組，讓我們只要一些基本的設定後，什麼 ES6、Less、樣版引擎啥的都能快速搞定，而且支援在不同需求中的不同設定，然後只需要在專案根目錄下一次 webpack 指令便能根據各自的設定完成打包。

雖然比起全自由的wepback.config.js有些許限制，但個人覺得夠用了 XD

而且因為有了這個模組，我們考試都考100分就不需要再手動安裝和設定一堆有的沒的，設定到腦神經衰落還不會動。

安裝

npm install gt-pack --save-dev

使用

webpack.config.js

const gtPack = require('gt-pack');

let gp = gtPack.GuanTing({
    dirName: __dirname + '/views/output',   // 輸出位置
    // HTML
    html:
    {
        index: __dirname + '/dev/index.html',
        register: __dirname + '/dev/register.html'
    },
    // EJS 樣版引擎支援
    ejs:
    {
        index: __dirname + '/dev/index.ejs',
        register: __dirname + '/dev/register.ejs'
        dirName: __dirname + '/views/ejs'   // 指定這個部分的其他輸出位置
    },
    // 目前支援的 CSS 前置處理器是 LESS
    css:
    {
        index: __dirname + '/dev/css/index.less',
        register: __dirname + '/dev/css/register.less'
    },
    // JS 支援 babel ES6 轉換。
    js:
    {
        index: __dirname + '/dev/js/index.js',
        register: __dirname + '/dev/js/register.js'
    },
    // TypeScript
    ts:
    {
        index: __dirname + '/dev/js/index.ts',
        register: __dirname + '/dev/js/register.ts',
    }
});

module.exports = gp;

多節點用法

project/webpack.config.js

const noder = require('gt-pack').noder;

let List = 
[
    require('./dirA/webpack.config.js'),    // 資料夾 dirA 下的 webpack
    require('./dirB/webpack.config.js'),    // 資料夾 dirB 下的 webpack
];

module.exports = noder(List);

這可以讓webpack的設定變成一個樹狀節點的結構，讓webpack可以在不同的資料夾中有不同的設定。

一些用法補充

TypeScript

TypeScript 必須再多做幾個設定。

請在專案根目錄新增：tsconfig.webpack.json

{
    "compilerOptions": {
        "removeComments": true,
        "sourceMap": true
    }
}

// 可以自由增加自己的設定

否則會無法編譯。

最後

這是我跟夥伴討論後決定開源出來的一個小小作品，雖然主要是想利用 npm 官方 registry 超快的網速加快我們安裝的速度，不過也歡迎大家給點意見與指教啦！

GitHub: https://github.com/single9/gt-pack