Seems like the tree shaking feature of Webpack helps to remove unused code from the bundle. However, Webpack does read these unreadable files. How do I tell Webpack not to read them?
Here is an example:
index.js
import { bar } from './bar';
bar();
bar/index.js
export { bar } from './bar';
export { foo } from './foo';
bar/foo.js
import fs from 'fs';
export function foo() {}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'production',
module: {
rules: [
{ sideEffects: false }
],
},
optimization: {
usedExports: true
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
Running Webpack result in the following error:
ERROR in ./src/bar/foo.js Module not found: Error: Can't resolve 'fs' in "/temp/webpack-test/src/bar'
I expect Webpack to not read the foo.js file because there is no route from the entry point to this file.