WebPack 설정 및 실행

webpack은 node js환경에서 돌아간다.

 

1. npm init

2. npm install react

3. npm install react-dom

4. npm install -D webpack

5. npm install -D webpack-cli

 

이렇게 기본 다운 받기

 

webpack.config.js 라는 이름의 파일 생성 후

 

const path = require('path')

module.exports = {
    name:'heini',
    mode:'development',  // 배포할때 : production
    devtool:'eval', // 배포용: hidden-source-map


    //webpack이 입력받을 내용들
    entry:{
        app:['./index.jsx']
    },

    //내보낼 내용들 .. 경로와 파일명
    output:{
        path:path.join(__dirname,'dist'),
        filename:'app.js'
    }
}

 

이렇게 작성

 

그리고 entry에 있는 index.jsx 파일을 생성해서

 

const React = require('react');
const ReactDOM = require('react-dom');

class App extends React.Component{
    render(){
        return(
            React.createElement('div',null,'hello webpack!!!')
        )
    }
}

ReactDOM.render(
    React.createElement(App),
    document.querySelector('#root')
)

 

hello webpack이라는 div를 화면에 한번 표출해보자

 

화면을 표출해줄 html 파일을 만들고

 

<script type="text/javascript" src="./dist/app.js"></script>

 

이렇게 연결해준다

 

이렇게 설정된 webpack을 실행하려면 여러 방법이 있는데 일단 그중 하나의 방법으로

package.json 파일에 scripts아래에 "dev":"webpack"을 입력해준다.

 

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  },

 

그 다음 터미널에서 npm run dev로 실행시킨다.