Resolve Modules 실습

• package.json 생성

  npm init -y
  npm install webpack & jquery --save-dev
  

• index.html 생성 ```html

- app/index.js 생성
```javascript
// 세가지 실습 예정
// #1 - Using NPM
// #2 - Using alias
// #3 - Using Provide Plugin

• webpack.config.js 생성 ```javascript var path = require(‘path’); var webpack = require(‘webpack’);

module.exports = { entry: ‘./app/index.js’, output: { filename: ‘bundle.js’, path: path.resolve(__dirname, ‘dist’) } };

## Using NPM
- app/index.js
```javascript
// #1 - Using NPM
var $ = require('jquery');
console.log("loaded jQuery version is " + $.fn.jquery);

Using Alias

• webpack.config.js에서 module에 resolve추가

  ...
  module.exports = {
  ...
  resolve: {
    alias: {
      Vendor: path.resolve(__dirname, './app/vendor/')
    }
  }
  };
  

• app/index.js

  // #2 - Using alias
  import $ from 'Vendor/jquery-2.2.4.min.js';
  console.log("loaded jQuery version is " + $.fn.jquery);
  

• import $ from 'jquery'로 선언할 경우 node_modules에 설치되어 있는 jquery를 불러옴

Using Provide Plugin

• webpack.config.js에서 module에 resolve추가

  ...
  module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery'
    })
  ]
  };
  

• app/index.js

  // #3 - Using Provide Plugin
  console.log("loaded jQuery version is " + $.fn.jquery);