使用相对路径为长路径配置npm& webpack Win10 [英] configure npm&webpack Win10 for long paths using relative paths
问题描述
当前 webpack捆绑项目文件夹结构(win10):
root_folder \
| --node_modules
| --src
| --index.js
| --template.html
| --package.json
| --webpack.config.js
index.js 的内容: console.log("Hello Webpack");
template.html :
<!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的内容:
Contents of 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的内容:
Contents of 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:\ ver \\ 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处理以及模块捆绑.
How to make this folder completely portable, i.e. when running npx webpack or npm run build this always can run well, no matter if working with C:\root_folder\ or with C:\very\longpath\root_folder.
Have successfully ran npx webpack for this example in C:\root_folder\ and then i copied ** root_folder ** like it is into D:\testing\root_folder\ and when running npx webpack from D:\testing\root_folder\ it worked, which obviously shows it is portable.
Summary: It is helpful to store root folders of webpack bundling projects if they belong to other projects in their own project subfolder, so it is useful to be able to have root_folder sometimes in nested folders.
Question: Is there available a way to resolve all root_folder/ scripts with local paths in windows with simple npm scripts or even npx command, so it will not return error for long paths?
Current Answer: Well found which works is copying the nested root_folder to a temporary C:\temp\root_folder and from there do all the npm webpack processing and also module bundling.
推荐答案
所以在这里起作用的答案是挂载项目目录，然后从那里运行构建.
So answer which worked here was to mount the project directory and from there run the build.
所有必要的是拥有以下npm脚本(在package.json中):
All of what is necessary is to have the following npm scripts (in 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"
}
然后在cmd行中运行:
And then run in cmd line:
npm run nestingcompliance:build
这篇关于使用相对路径为长路径配置npm& webpack Win10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
