여행가들에게는 백팩
Backpack for travlers
피부를 위한 마스크팩
Maskpack for skin
우리에겐 웹팩이 있다
And we as developer have Webpack
웹팩을 적용하기 위해서 프로젝트 폴더를 하나 만들어준다
To apply webpack, create a project
mkdir webpack-project
cd webpack-project
npm init -y생성 - 이동 -이닛!
create - move - init
모듈 인스톨! 자일리톨!
install !
npm install -D webpack webpack-cli
or
npm install --save-dev webpack webpack-cliAnd
package.json 에
"scripts": {
"build": "webpack"
},And
npm run build를 하면 끝!
이 아닌 에러를 볼 수 있다.
읍다 읍다 읍다 다 읍다라고 나온다
테스트를 위해서 src 폴더안에 index.js 와 test.js 를 생성한다
./src/test.js
export default function hello (){
console.log('Hello ?')
}
/src/index.js
import hello from "./test";
window.addEventListener("DOMContentLoaded", () => {
hello();
});
webpack.config.js 파일도 만들어준다
./webpack.config.js
const path = require('path')
module.exports = {
mode : 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
}mode를 통해 "development" or "production" 을 지정
entry, output은 입구 출구이다
입구를 통해 ./src/index.js 로 다가가 빌드 후 output 출구로 내뱉는다.
노드 모듈 path.resolve() 문서에 대충 이렇게 동작한다고 나와있다
1.
path.resolve('/foo/bar', './baz');
// Returns: '/foo/bar/baz'
2.
path.resolve('/foo/bar', '/tmp/file/');
// Returns: '/tmp/file'
3.
path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// If the current working directory is /home/myself/node,
// this returns '/home/myself/node/wwwroot/static_files/gif/image.gif'1번은 두번쨰 인자가 상대경로이기 떄문에 '/foo/bar/baz' 가 return 되지만
2번은 절대경로이기 때문에 '/tmp.file' 로 인식한다
path.resolve('/foo', '/bar', 'baz') would return /bar/baz because 'baz' is not an absolute path but '/bar' + '/' + 'baz' is.
아무튼 그 후 npm run build 를 입력하면 dist 폴더를 확인할 수 있다.
정상적으로 동작하는지 보기위해
./src/index.html 생성 후
./dist 파일안에 있는 main.js 를 불러와준다
<body>
<test>test</test>
<script src="../dist/main.js"></script>
</body>
브라우저를 열면
위에서 만든 hello 함수가 실행된다