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.
So answer which worked here was to mount the project directory and from there run the build.
All of what is necessary is to have the following npm scripts (in package.json):
And then run in cmd line: