[webpack] ch3. Webpack Output

18 Jun 2021

javascript

Webpack Output

entry에서 설정하고 묶은 파일의 결과값을 설정

var path = require('path');
module.exports = {
  entry: {
      // ...
  },
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
      // filename: '[name].js'
  }
};

Output Name Options

output: {
    filename: '[name].js',  //1
    filename: '[hash].js',  //2
    filename: '[chunkhash].js',  //3
}

참고 API

path.join()

해당 API가 동작되는 OS의 파일 구분자를 이용하여 파일 위치를 조합
```
path.join('/foo', 'bar', 'baz/asdf');
// '/foo/bart/baz/asdf'
```

path.resolve()

join()의 경우 그냥 문자열을 합치지만, resolve는 오른쪽에서 왼쪽으로 파일 위치를 구성해가며 유효한 위치를 찾음
만약 결과 값이 유효하지 않으면 현재 디렉토리가 사용. 반환되는 위치 값은 항상 absolute URL임 ```javascript path.resolve(‘/foo/bar’, ‘./baz’); // ‘foo/bar/baz’

path.resolve(‘/foo/bar’, ‘/tmp/file/’); // ‘/tmp/file

path.resolve(‘wwwroot’, ‘static_files/png/’, ‘../gif/image.gif’); // 만약 현재 디렉토리가 /home/myself/node 라면 // ‘/home/myself/node/wwwroot/static_files/gif/image.gif’ ```