WEBPACK

WEBPACK is module bundler

 

많은 파일들을 가져와서, webpack에게 주면, webpack은 static 파일로 변환해준다.(브라우저도 알아들을 수 있도록 해준다.)

file => webpack => file (compatible files) for browser.

 

***npm install webpack webpack-cli*** => webpack-cli는 터미널에서 webpack을 쓸 수 있게 해준다.

***webpack.config.js 파일 생성***

 

package.json 에서, 노드 서버와, webpack이 다르게 running 할 수 있도록 만들어주면 편리하다.

ex)

"dev:assets": "WEBPACK_ENV=development webpack",

"build:assets": "WEBPACK_ENV=production webpack",

 

npm run dev:assets => running server

npm run build:assets => running webpack

 

webpack.config.js file is fully 100% client code 

webpack.config.js file doesn't work with server code 

"babel-node"를 쓸 수가 없다. => THEREFORE, you need to work with old JavaScript on webpack.config.js 

 

 

ex)

instead of 'export / import'  =>  modlue.exports = config;

 

WEBPACK has TWO things (entry, output)

 

entry: where your file comes from.

output: where do you want to put it? (output should be an Object)

 

path.resolve returns a full path from the root of your computer to the file.

path.resolve creates the absolute path.

 

path.join joins two paths together.

 

 

- regular expression을 scss or sass  사용해서 파일을 찾는다.

*npm install node-sass

*npm install autoprefixer

 

1. sass-loader  => normal CSS 

2. postcss-loader =>compatible CSS files with browsers(interpreter) ex) autoprefixer

3. css-loader => pure CSS files 

4. extract CSS texts =>  / output: 'static' folder / plugins: [new ExtractCSS("style.css")]

 

 

***웹펙 순서***

자바스크립트와 반대로 아래에서 부터 위로 올라간다.