如何告诉 Webpack 不要通过摇树来读取（排除）无法访问的文件？

Question

似乎 Webpack 的 tree shaking 功能有助于从包中删除未使用的代码。但是，Webpack 确实会读取这些不可读的文件。我如何告诉 Webpack 不要阅读它们？

这是一个例子：

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'
  }
};

运行 Webpack 会导致以下错误： ERROR in ./src/bar/foo.js Module not found: Error: Can't resolve 'fs' in "/temp/webpack-test/src/bar'

我希望 Webpack 不会读取 foo.js 文件，因为没有从入口点到该文件的路由。

Answer 1

这按预期工作。

有一条路线：

1. ./src/index.js:

import { bar } from './bar';

-> 如果 bar 是目录，默认路由到 {folder}/index.js

1. bar/index.js：

export { foo } from './foo';

---> export .. from .. 语法也导入指定的文件：

1. bar/foo.js

import fs from 'fs';

你得到了

Error: Can't resolve 'fs' in "/temp/webpack-test/src/bar'

因为 fs 在 webpack 默认的 target: web 配置中不可用。 您可以通过以下方式绕过它：

node: {
   fs: "empty"
},

但有些事情可能行不通。