Webpack 공부. - Hello World부터.

Hello World부터.
  • 디렉토리 초기화
  • npm init
    //       
    
  • 웹팩 설치(cnpm 사용)
  • npm install webpack --save-dev
    
  • 웹팩-cli 설치(cnpm 사용)
  • npm install webpack-cli --save-dev
    
  • 다음 디렉터리를 만들고 내용을 추가
  • │  index.html //     
    │
    ├─config
    │       webpack.config.js // webpack   
    │
    └─src
            index.js //      
    

    index.HTML
    
    
    
        
            webpack
        
        
        
            
        
    
    
    
    

    webpack.config.js
    const path = require('path');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname,'../', 'dist'),
            filename: 'bundle.js'
        }
    };
    

    index.js
    console.log("loaded")
    document.getElementsByTagName('body')[0].innerHTML='helloword'
    
  • 패키지에 시작 명령을 추가합니다.json의scripts에 추가:
  • "build": "webpack --config config/webpack.config.js --mode production"
    
  • 시작
  • npm run build
    
  • index를 두 번 클릭합니다.html 브라우저로 열면 helloword
  • 보이기
  • DONE
  • 좋은 웹페이지 즐겨찾기