使用相对路径为长路径配置 npm&webpack Win10答案

【问题标题】：configure npm&webpack Win10 for long paths using relative paths使用相对路径为长路径配置 npm&webpack Win10
【发布时间】：2020-11-07 11:51:38
【问题描述】：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    </html>

package.json 的内容：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js 的内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/index.js'),
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve(__dirname, './src/template.html'), // template file
            filename: 'index.html', // output file
        }),
    ]
};

如何使这个文件夹完全可移植，即在运行npx webpack 或npm run build 时，无论是使用C:\root_folder\ 还是使用C:\very\longpath\root_folder，它总是可以运行良好。
已在C:\root_folder\ 中成功运行此示例的npx webpack，然后我将** root_folder ** 复制到D:\testing\root_folder\ 中，当从D:\testing\root_folder\ 运行npx webpack 时它起作用了，这显然表明它是可移植的。
总结：如果 webpack 打包项目的根文件夹属于其他项目，则将它们存储在自己的项目子文件夹中会很有帮助，因此有时能够在嵌套文件夹中包含 root_folder 很有用。
问题：有没有一种方法可以使用简单的 npm 脚本甚至 npx 命令在 Windows 中使用本地路径解析所有 root_folder/ 脚本，这样长路径就不会返回错误？
当前答案：很好的方法是将嵌套的 root_folder 复制到一个临时的 C:\temp\root_folder 并从那里进行所有的 npm webpack 处理以及模块捆绑。

【问题讨论】：

标签： npm webpack config long-path

【解决方案1】：

所以这里的答案是挂载项目目录并从那里运行构建。

所有需要的是拥有以下 npm 脚本（在 package.json 中）：

"scripts": {
    "test": "ECHO \"Error: no test specified\" && EXIT 1",
    "build": "(IF EXIST \"%CD%/dist\" RMDIR dist /S /Q) && webpack",
    "nestingcompliance:build": "SUBST Z: \"%CD%\" && PUSHD Z: && npm run build && POPD && SUBST Z: /D"
  }

然后在命令行中运行：

npm run nestingcompliance:build

【讨论】：