-1

I'm trying to implement lazy loading and chunk splitting in my react app. up to now everything has been working fine and really haven't had any issues google couldn't resolve but this is doing my head in. please find below my babel and webpack config set up.

.babelrc

{
  "plugins": [
  "@babel/plugin-syntax-dynamic-import",
  "@babel/plugin-transform-member-expression-literals",
  "@babel/plugin-transform-property-literals",
  "@babel/plugin-proposal-object-rest-spread",
  "@babel/plugin-proposal-class-properties",
  "@babel/plugin-transform-runtime",
  "@babel/plugin-transform-regenerator"
 ],
 "presets": [
 [
  "@babel/preset-env",
   {
     "useBuiltIns": "usage"
   }
  ],
  "@babel/preset-react"
 ],
 "env": {
  "karma": {
   "plugins": [
    [
      "istanbul",
      {
        "exclude": [
          "tests/*.test.js"
        ]
      }
     ]
   ]
  }
 }
}

weback.config.js

`
 const developmentConfig = merge([
    {
      output: {
      chunkFilename: '[name].[chunkhash:4].js',
      filename: '[name].[chunkhash:4].js',
      path: PATHS.build,
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
           test: NodeRegex,
           name: 'vendor',
           chunks: 'initial',
           minChunks: 2,
         },
       },
     },
    },
  },
  parts.loadCSS(),
  parts.loadImages(),
  parts.generateSourceMaps({ type: 'cheap-module-eval-source-map' }),
  parts.clean(PATHS.build), // deletes old dist folder
]);`

 module.exports = (mode) => {
  if (mode === 'production') {
   return merge(commonConfig, productionConfig, { mode });
  }
  return merge(commonConfig, developmentConfig, { mode });
 };
user2982480
  • 29
  • 3
  • i've narrowed my issue down to the HTMLwebpack plugin for some reason it seems to register my app, runtime and vendor js files behind the dist folder. i.e './dist/ap.js'... but not the dynamic import. does anyone know why this might be. – user2982480 Nov 13 '18 at 15:50

1 Answers1

0

i fixed this finally. the issue was in my template. i had set a public path like this:

<% var reactClentPath = '/react-client/dist'; %>
<script src="<%= reactClentPath %>/<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script>

all i had to do was take that out and allow the public path set in my webpack-config.js handle this. <script src="<%= htmlWebpackPlugin.files.chunks[key].entry %>"

user2982480
  • 29
  • 3