Javascript에 날개를 날아줘!

//entry.js
require('./foo.css');
require('./bar.css');

var hello = require('./hello');
var world = require('./world');

console.log(hello + ' ' + world );

//hello.js
module.exports = 'hello';

//world.js
module.exports = 'world';

//webpack.config.js
module.exports= {
  //진입 파일을 경로 설정
  entry: {
    'entry': './entry.js'
  },
  //bundle 된 결과 파일 설정
  output: {
    filename: 'bundle.js'
  },
  //사용할 모듈 츄가
  module: {
    rules: [
      {
        //파일 확장자가 css로 끝나는 파일에 대해 style-loader와 css-loader를 적용
        test: /\.css$/,
        use: [
          //사용순서는 아래에서부터 위로, css-loader적용 후, style-loader를 적용한다.
          //head안의 style 태그로 넣어줌
          'style-loader',
          //@import나 url을 require문 처럼 사용할 수 있게 바꿔줌
          'css-loader'
        ]
      },
      //eslint는 dependencies에 추가
      {
        //enforce 옵션을 사용하면 babel-loader보다 먼저 eslint를 거침
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      //새로운 규칙 추가 babel-loader, babel-core, babel-preset-env
      {
        test: /\.js$/,
        //node_modules안의 파일은 예외처리
        exclude: /node_modules/,
        //ES2015를 사용하기 위한 트랜스파일러 로더를 사용
        loader: 'babel-loader',
        options: {
          //환경을 설정하여 해당 설정에 맞게 preset
          presets: [[
            'env', {
              targets: {
                //브라우저 별로 최신의 2개 버전만 고려
                browsers: ['last 2 versions']
              }
            }
          ]]
        }
      }
    ]
  }
};

require('./foo.css');
require('./bar.css');

// var hello = require('./hello');
import hello from './hello';

//var world = require('./world');
import world from './world';

console.log(hello + ' ' + world );