[webpack] ch7. Libraries Codes Splitting

18 Jun 2021

javascript

Libraries Codes Splitting

npm init -y으로 package.json 생성
npm명령어로 loader&plugin 설치

Bundling libraries

npm init -y로 package.json 생성

아래 명령어를 통해 라이브러리 설치

npm install webpack --save-dev
npm install mement lodash --save
npm install webpack-manifest-plugin --save-dev

index.html 추가 ```html <!DOCTYPE html>

Libraries Code Splitting

Moment JS :

not yet loaded

Lodash JS :

not yet loaded

4. `app/index.js` 추가
```javascript
var moment = require('moment');
var _ = require('lodash');
var ele = document.querySelectorAll('p');

document.addEventListener("DOMContentLoaded", function(event) {
  ele[0].innerText = moment().format();
  ele[1].innerText = _.drop([1, 2, 3], 0);
});

webpack.config.js 추가 ```javascript var webpack = require(‘webpack’); var path = require(‘path’);

module.exports = { entry: { main: ‘./app/index.js’, vendor: [ ‘moment’, ‘lodash’ ] }, output: { filename: ‘[name].js’, path: path.resolve(__dirname, ‘dist’) } }

- optional
```javascript
// 1 (webpack4부터 없어짐)
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor' // Specify the common bundle's name.
  }),
]

// 2 (webpack4부터 없어짐)
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'manifest'] // Extract the webpack bootstrap logic into manifest.js
  }),
]

// 3
new ManifestPlugin({
  fileName: 'manifest.json',
  basePath: './dist/'
})

// CommonChunkPlugin기능을 쓰려면 아래와 같은 코드를 Plugin이 아닌 module에 삽입해야함
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        enforce: true,
      },
    },
  },
  runtimeChunk: {
    name: 'manifest',
  }
},

optional내용을 적용하지 않고 webpack을 실행시키면 main.js와 vendor.js로 나눠서 번들링 하지만 안의 내용은 main.js에도 vendor.js내용이 중복되어 번들링 되어 있음
optimization를 통해 이를 해결 할 수 있음(webpack4)
optional 3번의 경우 manifest내용을 json형태로 작성하여 주는 역할을 하는데 아래와 같은 변수선언 후 플러그인을 추가해야 함
```
var manifestPlugin = require('webpack-manifest-plugin');
```