[WebPack] 코드분할 방법

코드를 나누어서 빌드할 수 있다.

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
  |- index.js
+ |- another-module.js
  |- /node_modules

another-module.js

import _ from 'lodash';

console.log(
  _.join(['Another', 'module', 'loaded!'], ' ')
);

 

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
+   another: './src/another-module.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

 

복제방지

분할한 코드에서도 동일한 내용이 있을 시 동일하게 사용할 수 있도록 따로 만들어준다

 

webpack.config.js

  const path = require('path');

  module.exports = {
    mode: 'development',
    entry: {
      index: './src/index.js',
      another: './src/another-module.js',
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
+   optimization: {
+     splitChunks: {
+       chunks: 'all',
+     },
+   },
  };