Thanks a lot for your extensive reply! webpack actually executes but the webpack.config.js throws many errors. Actually the syntax used on the wiki page seems to have extensivley evolved. In the beginning webpack didnt want to even start run and i changed the config fila as follows:
const url = "vuetest" // change this to the url specified in the uibuilder node
var webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
var HTMLWebpackPluginConf = new HtmlWebpackPlugin({
template: __dirname + '/uibuilder/' + url + '/src/index_template.html',
filename: 'index.html'
});
var CopyWebpackPluginConf = new CopyWebpackPlugin({
patterns:[
{ from: './uibuilder/' + url + '/src/manifest.json' }
]
});
var UglifyJSPluginConf = new UglifyJSPlugin({
uglifyOptions: {
compress: {
warnings: false,
},
output: {
comments: false
},
}
});
module.exports = {
entry: [
'./uibuilder/' + url + '/src/index.js',
'normalize.css'
],
output: {
path: path.resolve(__dirname, 'uibuilder/' + url + '/dist'),
filename: 'bundle.min.js'
},
plugins: [
UglifyJSPluginConf,
HTMLWebpackPluginConf,
CopyWebpackPluginConf
],
module: {
rules: [
{
use: [
'imports-loader',
{
loader: 'imports-loader',
options: {
test: /uibuilderfe.js$/,
use: "this=>window"
}
},
'style-loader',
{
loader: 'css-loader',
options: {
test: /\.css$/,
exclude: /node_modules/
}
},
'style-loader',
{
loader: 'css-loader',
options: {
test: /normalize.css$/,
}
}
]
}
]
}
};
but thats not yet it as i get the following error
Hash: **7f1dd5b3d858e55a6a12**
Version: webpack **4.44.0**
Time: **267** ms
Built at: 2020-07-30 **15:43:02**
2 assets
Entrypoint **main** = **bundle.min.js**
[0] **multi ./uibuilder/vuetest/src/index.js normalize.css** 40 bytes { **0** } **[built]**
[1] **./uibuilder/vuetest/src/index.js** 1.08 KiB { **0** } **[built]** **[failed] [1 error]**
**WARNING in configuration**
**The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.**
**You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/**
**ERROR in ./uibuilder/vuetest/src/index.js**
**Module build failed (from ./node_modules/imports-loader/dist/cjs.js):**
**ValidationError: Invalid options object. Imports Loader has been initialized using an options object that does not match the API schema.**
**- options should be one of these:**
**object { imports, … } | object { wrapper, … } | object { additionalCode, … }**
**Details:**
*** options has an unknown property 'test'. These properties are valid:**
**object { imports, … } | object { wrapper, … } | object { additionalCode, … }**
*** options has an unknown property 'use'. These properties are valid:**
**object { imports, … } | object { wrapper, … } | object { additionalCode, … }**
*** options misses the property 'imports' | should be any non-object.**
*** options misses the property 'wrapper' | should be any non-object.**
*** options misses the property 'additionalCode' | should be any non-object.**
**at validate (/Users/gregor/.node-red/node_modules/schema-utils/dist/validate.js:96:11)**
**at Object.loader (/Users/gregor/.node-red/node_modules/imports-loader/dist/index.js:28:28)**
**@ multi ./uibuilder/vuetest/src/index.js normalize.css main[0]**
**ERROR in multi ./uibuilder/vuetest/src/index.js normalize.css**
**Module not found: Error: Can't resolve 'normalize.css' in '/Users/gregor/.node-red'**
**@ multi ./uibuilder/vuetest/src/index.js normalize.css main[1]**
**ERROR in bundle.min.js from UglifyJs**
**DefaultsError: `warnings` is not a supported option**
**at DefaultsError.get (eval at <anonymous> (/Users/gregor/.node-red/node_modules/uglify-js/tools/node.js:18:1), <anonymous>:69:23)**
**at Function.buildError (/Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/index.js:105:54)**
**at /Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/index.js:258:52**
**at Array.forEach (<anonymous>)**
**at /Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/index.js:233:17**
**at step (/Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:85:9)**
**at done (/Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:96:30)**
**at /Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:101:13**
**at TaskRunner.boundWorkers (/Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:70:11)**
**at enqueue (/Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:91:14)**
**at /Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:111:9**
**at Array.forEach (<anonymous>)**
**at TaskRunner.run (/Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:89:11)**
**at UglifyJsPlugin.optimizeFn (/Users/gregor/.node-red/node_modules/uglifyjs-webpack-plugin/dist/index.js:227:18)**
**at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gregor/.node-red/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)**
**at AsyncSeriesHook.lazyCompileHook (/Users/gregor/.node-red/node_modules/tapable/lib/Hook.js:154:20)**
**at /Users/gregor/.node-red/node_modules/webpack/lib/Compilation.js:1409:36**
**at eval (eval at create (/Users/gregor/.node-red/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)**
**at /Users/gregor/.node-red/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:267:53**
Child **HtmlWebpackCompiler** :
**ERROR in Entry module not found: Error: Can't resolve '/Users/gregor/.node-red/uibuilder/vuetest/src/index_template.html' in '/Users/gregor/.node-red'**
I assume once all the option errors are fixed the rest will go away as well so i have to dig in and understand what the different loaders etc actually do. Conceptually its quite clear basically its a rewrite of the code a sort of compiler to produce 'production ready' code.
btw in the section where it s stated to change template_index.html ( as copied from the original index.html) to remove the following lines
<link rel="stylesheet" href="index.css">
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="uibuilderfe.min.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="vendor/normalize.css/normalize.css">
only three of the actualy exist for removal. The two lines below don't exist in that file:
<link rel="stylesheet" href="vendor/normalize.css/normalize.css">
<script src="vendor/jquery/dist/jquery.min.js"></script>
As i understood the normalize.css will be created during the webpack processing. Maybe the file this ws taken from originally was already a processed index.html file i.e. state after webpack has run.
// have a nice evening
