webpack

webpack 설치 & 기본 명령어 정리

foglove 2019. 8. 26. 15:32

명령어

- npm i webpack-manifest-plugin(패키즈명) --save-dev(현재 개발 서버에만 사용한다.)

 

install --save vs --save-dev 

  • --save는 앱이 구동하기 위해 필요한 모듈&라이브러리 설치 ex) react,vue 
  • --save-dev 는 앱 개발시에 필요한 모듈&라이브러리 설치 ex)test,build tool,live reloading 

 

 

 

1. node 설치 url : https://nodejs.org/en/

2. 터미널 cmd 창을 켜서 cd |원하는 경로| 에 들어 가서  npm i webpack 명령어를 치고 엔터 치면 자동으로 설치된다.

글로벌로 설치 하고 싶다면 npm i webpack -g 맨뒤에 -g 옵션을 붙이면 글로벌로 설치됨.

3.npm init -y 사용 하게 되면 package.json 파일이 생성 되고 기본적인 옵션 으로 셋팅 된다.

4. index.html 기본 파일을 만들고  

ex) 

<html>
  <head>
    <title>Webpack Plugins</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

를 넣어 준다.

5. index.js 파일을 생성 해주고 

ex) 

var $ = require('jquery');
console.log("loaded jQuery version is " + $.fn.jquery);

index.js 에 위에 내용을 넣어준다.

6. 상위 폴더 밑에 webpack.config.js 를 생성 후 

var path = require('path');
var webpack = require('webpack');

module.exports = {
  //1개의 파일로 생성 하고 싶을때
  entry: './app/index.js', //현재 있는 파일으로 webpack 돌린다.
  //다중 파일로 생성 하고 싶을떄 
  entry: {
    main: './app/index.js',
    vendor: [
      'moment',
      'lodash'
    ]
  },
  module: { 
    rules: [{
      test: /\.js$/,  //js 파일 전체
      exclude: 'node_modules', 
      use: {
        loader: 'babel-loader', //바멜 로더를 통해 es6 -> es5 변환
        options: {
          presets: ['env']
        }
      }
    }]
  },
  //1개의 고정 파일로 생성 하고 싶을떄
  output: {
    filename: 'bundle.js', //webpack을 다돌리고 bundle.js 생성
    path: path.resolve(__dirname, 'dist') //bundle.js 생성 될 디렉토리를 잡아준다.
  },
  //다중 파일로 생성 하고 싶을떄
  output: {
    filename: '[name].js', //entry에 선언된 main,vendor 이름으로 각각 생성 된다.
    path: path.resolve(__dirname, 'dist') 
    //resolve: 왼쪽에서 오른쪽으로 파일 생성 디렉토리 설정
	//join: 왼쪽에서 오른쪽으로 파일 디렉토리 설정
  }
  externals: { // webpack 시 제외 시킨다. 
    jquery: 'jQuery'
  },
  resolve: {// 모듈간의 의존성 고려하여 모듈을 로딩한다. 즉 모듈을 어떻게 로딩해오느냐?관점
    alias: { //별칭 짓기
      Vendor: path.resolve(__dirname, './app/vendor/') // import 할때 /app/vendor/ 대신 Vendor로
      사용이 가능 하다.
    }
  },
  plugins: [ //webpack 플러그인을 사용 하고 싶을떄 
    new webpack.ProvidePlugin({ //import 각각 할 필요 없이 전체 로딩이 필요시 넣어 준다.
      $: 'jquery'
    })
  ]
};

7. webpack 명령어를 실행 시킨다.