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

啊就一個 webpack 的通用使用整合包。
https://github.com/single9/gt-pack

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/single9/gt-pack
• Owner: single9
• License: mit
• Created: 2017-08-31T02:49:49.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-14T08:37:51.000Z (over 7 years ago)
• Last Synced: 2025-01-11T14:45:11.089Z (4 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/gt-pack
• Size: 24.4 KB
• Stars: 1
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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);