Bundle json files with Webpack

웹팩에서 파일을 다루게 되어 module 옵션에 아래와 같이 url-loader을 사용하였다.

참고: url-loader는 파일을 base64 URL로 변환하는 처리를 한다. 즉, 파일을 옮기는 작업이 아니라 변환해서 output directory에 저장하는 역할을 한다.

module.exports = [{
    mode: 'production',
    context: __dirname,
    entry: {
        app: './src/js/milsymbol/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        mainFields: ['module', 'main']
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', { loader: 'css-loader' }],
            sideEffects: true
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: ['url-loader']
        }, 
        //...
     ]
    },
    optimization: {
        usedExports: true
    },
    //...
}];

webpack 공홈에서는 자동으로 json file을 로드해준다고 했지만 번들링 시 확장자가 json인 파일에서 에러가 발생했다. 

webpack will automatically try to load the JSON file.

이게 가장 적절한 해결 방법인지는 잘 모르겠지만

변수 맨 앞에 export를 붙여서 내보기로 수정하고 다시 실행해보니 에러가 해결되었다.