webpack 시작하기 - 2

webpack 공부일지 2
기본 컨셉을 알고하자

- Entry
: transpile 되기 이전의 상태 파일주소
- Output
: transpile 되고나서의 파일 주소
: 설정하기에 따라 여러개를 둘 수 있다. Entry도 마찬가지
- Loader
: 특정 파일의 패턴을 정의한 후, loader를 적용 시킴 bundling 되기 이전에 전처리 된다
: ex) babel, cssloader 등
- Plugins
: loader는 특정 유형의 모듈을 변환하는데 사용되지만, plugin은 더 넓은 범위에 영향을 끼친다
: ex) uglify

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

Multiple Entry Points Example

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// writes to disk: ./dist/app.js, ./dist/search.js

여기서 핵심적으로 인지해야 할 부분은 [name] 이다. entry의 key들을 mapping 해서 output 파일을 생성해준다