Current webpack bundling project folder structure (win10):
root_folder\
|--node_modules
|--src
|--index.js
|--template.html
|--package.json
|--webpack.config.js
Contents of index.js:console.log("Hello webpack");
Contents of 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>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"}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 }), ]};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.