webpack4 코드 스플리팅

책에 쓰인 예제는 webpack 2 or 3 기준으로 작성된 것으로 보입니다.

webpack 4 기준으로 예제코드를 수정합니다.

 

p392 config/webpack.config.dev.js -- entry

AS-IS

entry : [
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    require.appIndexJs,
],

TO-BE

webpack4 에서는 설정파일이 통합되어있습니다. 실제 수정해야 할 파일은 다음과 같습니다.

config/webpack.config.js

entry: {
  app : [
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs
  ].filter(Boolean),    
  vendor : [
    'react',
    'react-dom',
    'react-router-dom'
  ]
}

 

p393 CommonChunkPlugin 은 webpack4에서 삭제되었습니다. optimization.splitChunks 를 수정합니다.

AS-IS

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.js'
    }),
    new InterpolateHtmlPlugin(env.raw),
    new webpack.NormalModuleReplacementPlugin(
        /^pages$/,
        'pages/index.async.js'
    ),        
    (...)

TO-BE

output: {
    (...)
    chunkFileName: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
    (...)
optimization : {
    (...)
    splitChunks: {
        cacheGroups:{
            vendor: {
                chunks: 'initial',
                name: 'vendor',
                enforce: true
            }
        }
    },
    (...)
},
plugins:[
    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
    new webpack.NormalModuleReplacementPlugin(
        /^pages$/,
        'pages/index.async.js'
    ),
    (...)
]

vendor chunk가 빌드됩니다.