如何：1 Webpack 用于从 node_modules 导入 lib 的所有项目

Question

// Project Tree View: My idea about using Webpack.

+ Toolkit:
  - D:/Toolkit/Webpack/webpack.config.js

+ Project:
  - D:/Project/A/build/index.ts
  - D:/Project/B/build/index.ts
  - D:/Project/C/build/index.ts

// Toolkit: [webpack.config.js] file

const path = require('path');
module.exports = (env) => {

    let project_root = env.path;

    console.log(env);
    console.log(__dirname);

    return {
        mode: env.mode,
        entry: project_root+'/build/index.ts',
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: 'ts-loader',
                    include: [
                        path.resolve(project_root, 'build'),
                        path.resolve('./node_modules'),
                    ]
                }, {
                    test: /\.scss$/,
                    use: [
                        "style-loader",
                        "css-loader",
                        "sass-loader",
                    ]
                }
            ]
        },
        output: {
            publicPath: 'public',
            filename: 'script.js',
            path: path.resolve(project_root, 'assets/js')
        },
        resolve: {
            modules: ['node_modules'],
        },
    }
}

构建命令：yarn build --env=path=D:/Project/C

该命令可以正常工作，但是从 node_modules 导入任何库时
例如：

import {lib} from "example_lib";
import {lib} from "~example_lib";
import {lib} from "@example_lib";
import {lib} from "node_modules/example_lib";
import {lib} from "./node_modules/example_lib";

错误

ERROR in ../A/build/index.ts 1:0-52
Module not found: Error: Can't resolve 'example_lib' in 'D:\Project\A'
resolve 'example_lib' in 'D:\Project\A'
  Parsed request is a module
  No description file found in D:\Project\A\build or above
  resolve as module
    D:\Project\A\build\node_modules doesn't exist or is not a directory
    ...
    D:\node_modules doesn't exist or is not a directory

ERROR in D:\Project\A\build\index.ts
../A/build/index.ts 1:20-49
[tsl] ERROR in D:\Project\A\build\index.ts(1,21)
      TS2792: Cannot find module 'example_lib'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

webpack 5.26.2 compiled with 2 errors in 1939 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

问题是：

• 如何为所有项目使用ONLY 1 Webpack node_modules？

Gulp 可以解决这个问题，但是Webpack 呢？

我不希望每个项目都有 1 个 node_modules 或 webpack, package,... 里面（它会破坏我的电脑！）

Answer 1

• 问题已解决！
• 上面的代码是正确的。
• “.js”格式正常工作；但是“.ts”需要在每个导入外部节点模块上方添加// @ts-ignore。

这就是答案！

// @ts-ignore
import {lib} from "example_lib";

---

注意： 7 天研究 Webpack

这是我的看法： Gulp 比 Webpack 多得多，即使它的用户较低
这些是 Webpack 应该具备的 Gulp 的优点！

• 控制核心的时间更短。
• 用户友好。
• 结构清晰整洁，少了支架。
• 轻松灵活地创建自定义配置。
• 易于使用，随着时间的推移不断发展。
• 不仅适用于网络领域，也适用于备份数据、自动等。
• 1 个 node_modules 用于所有外部项目（Gulp 比 Webpack 更少的错误和编码行）。
• 编译时间相同。

?? Gulp 是国王 ? ！