npm + webpack을 이용한 svg.js 사용

1. npm init을 통해 초기화 수행

$ npm init

2. svg.js 설치

$ npm install -save svg.js

3. webpack 설치 / 추후 debugging을 위해 source-map-loader 설치

$ npm install -save webpack source-map-loader

4. webpack.config.js 파일 추가
entry file을 index.js로 설정

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },

    module: {
            loaders: [
                // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
            ]
    },

    resolve: {
        extensions: ['.js']
    }
};

5. index.js 파일 작성

var SVG = require('svg.js');
var draw = SVG('drawing').size(300, 300);
var circle = draw.circle(100).attr({ fill: '#3B3'});

6. weppack 수행

$ webpack
Hash: f1b01a8441b3b6f4f17f
Version: webpack 3.10.0
Time: 290ms
    Asset    Size  Chunks             Chunk Names
bundle.js  150 kB       0  [emitted]  main
   [0] ./index.js 127 bytes {0} [built]
    + 1 hidden module

7.index.html파일에 bundle.js 파일 추가

    <body>
        <div id="drawing"></div>   
        <script type="text/javascript" src="bundle.js"></script>
    </body>

8.결과 화면