import static files using Webpack with copy-webpack-plugin

Question

My current Webpack version is 3.10.0 Copy-webpack-plugin version is 4.3.1 This is my configuration file plugin parts in webpack.

 plugins: [
    new ExtractTextPlugin('style.css'),
    new CopyWebpackPlugin([ { from: APP_DIR + '/static' } ]),
],

Here APP_DIR is the path to my client folder.

In my static folder I have SOME_FILE.js which is a file that simply exports an array of objects. The size of that file is 700kb. I don't want to include that in my code so that my Webpack bundles it and increases my app size. I want to include that static file separately.

So when I run this command

import COUNTRIES from 'static-path/SOME_FILE.js';

But this gives me an error

 Module not found: Error:

Answer 1

Anyone who runs into a similar situation/problem. I solved it using a request method like fetch or axios. (I used fetch). So the JSON was put in a static folder and using fetch I loaded the JSON file.

I did some research on it, turns out there is a second option as well. Using the common chunks plugin in webpack. Webpack has a detail documentation regarding code splitting Code Splitting In Webpack

I personally went for the first option. It seemed easy and kind of does the same thing as option 2, but only in a simpler way.