啊就一個 webpack 的通用使用整合包。
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
index.js
package.json
webpack.config.js

README.md

GT Pack

簡介

啊就一個 webpack 的通用使用整合包。

使用 Webpack 2.x,理論上可相容 3.x 版本。

安裝

npm install gt-pack

使用

webpack.config.js 加入:

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

分別設定範例

JS

module.exports = new gtPack.js({
    entry: {
        index: '__dirname + ' / js / index.js ',
    },
    output: {
        filename: 'public/js/[name].js',
        path: __dirname + '/',
    }
});

TS

module.exports = new gtPack.ts({
    entry: {
        index: '__dirname + ' / js / index.ts ',
    },
    output: {
        filename: 'public/js/[name].js',
        path: __dirname + '/',
    }
});

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

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

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

CSS

module.exports = new gtPack.css({
    entry: {
        index: '__dirname + ' / less / index.less '
    },
    output: {
        filename: 'public/style/[name].css',
        path: __dirname + '/',
    }
}, {
    filename: 'public/style/[name].css',
});

JS + CSS

// JS
let js = new gtPack.js({
    entry: {
        index: __dirname + '/js/index.js',
    },
    output: {
        filename: 'public/js/[name].js',
        path: __dirname,
    }
});

// CSS
let css = new gtPack.css({
    entry: {
        index: __dirname + '/less/index.less'
    },
    output: {
        filename: 'public/style/[name].css',
        path: __dirname,
    }
}, {
    filename: 'public/style/[name].css',
});

module.exports = [js, css];

整合設定

第一種設定方式

let x = gtPack.GuanTing({
    dirName: __dirname + '/views/output', // 輸出位置
    html: {
        index: __dirname + '/dev/index.ejs',
        register: __dirname + '/dev/register.ejs'
    },
    css: {
        index: __dirname + '/dev/css/index.less',
        register: __dirname + '/dev/css/register.less',
    },
    js: {
        index: __dirname + '/dev/js/index.js',
        register: __dirname + '/dev/js/register.js',
    }
});

module.exports = x;

第二種設定方式

let x = gtPack.GuanTing({
    dirName: __dirname + '/views/output', // 輸出位置
    html: gtPack.readEntries(__dirname + '/views/', process.cwd() + '/build/views/'),
    css: gtPack.readEntries(__dirname + '/views/less/', process.cwd() + '/build/views/', 'less')
    js: gtPack.readEntries(__dirname + '/views/js/', process.cwd() + '/build/views/', 'js')
});

module.exports = x;

樹狀結構

這是一個樹狀節點版本的結構,讓webpack可以在不同的資料夾中有不同的設定。

let noder = require('gt-pack').noder;
let List = [
    require('./dirA/webpack.config.js'),    // 其他設定
    require('./dirB/webpack.config.js'),    // 其他設定
];

module.exports = noder(List);