webpack configuration helper and presets.
npm i --save-dev frontpack
webpack.config.js
'use strict';
const frontpack = require('frontpack'); // load frontpack
const fp = new frontpack({
debug: false, // debug mode (default false)
verbose: true // echo information (default true)
});
const config = fp
.preset([
'common', // use @frontpack/preset-common
'babel', // use @frontpack/preset-babel
'style', // use @frontpack/preset-style
'server', // use @frontpack/preset-server
// './my-preset/my.js', // local config
// 'frontpack-external-preset' // external package
]) // load from preset
.config({ // your webpack config
entry: {
main: [
'./src/assets/js/main.js',
'./src/assets/css/style.scss'
]
}
}).option({ // preset options
copy: [], // copy {from: '/path/from/file', to: '/path/to'}
options: { // loader options
}
}).export(); // export webpack config object
module.exports = config;
基本設定をまとめたプリセット
npm i -D @frontpack/frontpack-preset-common
babelを使うためのプリセット
npm i -D @frontpack/frontpack-preset-babel
typescriptを使うためのプリセット
npm i -D @frontpack/frontpack-preset-typescript
HTMLを生成するためのプリセット
npm i -D @frontpack/frontpack-preset-html
SASS/CSSをビルドして生成するためのプリセット
npm i -D @frontpack/frontpack-preset-style
複数の画像からスプライト画像とscssを生成するためのプリセット
npm i -D @frontpack/frontpack-preset-sprite
簡単にDLLファイルを生成するためのプリセット
- 要 preset-common
npm i -D @frontpack/frontpack-preset-dll
開発用サーバーを立ち上げるプリセット
- 要 preset-common
npm i -D @frontpack/frontpack-preset-server
- 要 preset-html
- 要 preset-style
angular(2.x)のためのプリセット
npm i -D @frontpack/frontpack-preset-angular
frontpack.preset
frontpack.config
frontpack.option
frontpack.export
frontpack.strategy
- document coming soon...
- document coming soon...
Babelを使った汎用Web制作テンプレート frontpack-example-standard
angular(2.x)を使った開発のためのテンプレート frontpack-example-angular
- update documentation
- unit testing
- preset-react
- preset-vue