aurelia-materialize-bridge: New webpack skeleton not working with AMB
Just wanted to create a ticket that the new skeleton is not yet working with AMB out of the box.
Needed to add
ModuleDependenciesPlugin({
"aurelia-materialize-bridge": [
'./autocomplete/autocomplete',
'./badge/badge',
'./box/box',
'./breadcrumbs/breadcrumbs',
.... and so on
However even with that lot of files are missing it seems (e.g. slider.css). I’m still trying to figure this out, but maybe it would be nice if AMB is supporting this Platform implementation in the future, so that dependencies will be resolved automatically. https://github.com/jods4/aurelia-webpack-build/wiki/Managing-dependencies
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 36 (13 by maintainers)
Commits related to this issue
- fix(webpack): correctly use PLATFORM.moduleName, ref #401 — committed to aurelia-ui-toolkits/aurelia-materialize-bridge by Thanood 7 years ago
Have a look a this post https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/401#issuecomment-294447485
You cannot extract css required from html. That is why the author uses separate rule for those cases and respective CSS is always going to be in JS bundle
A couple of things:
most importantly, you need to add
new AureliaPlugin({ aureliaApp: undefined, dist: "native-modules" })
to your vendor bundle. For details, see https://github.com/aspnet/templating/pull/37secondly, in loaders replace
{ test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? "css-loader" : "css-loader?minimize"]) }
with{ test: /\.css(\?|$)/, loader: isDevBuild ? "css-loader" : "css-loader?minimize" }
. The first line does not work because the bridge imports css as modules, but extract plugin moves them into a separate css file.But, IMHO, you should use the config I posted - it automatically splits the bundle without the need to explicitly maintain the list of modules. That’s roughly how angular CLI builds.
@R74NN here is
webpack.config.js
which works in your project. This is the only webpack config you need - it will automatically create a vendor bundle.Also, you should remove bootstrap imports and add
<require from="materialize-css/dist/css/materialize.css"></require>
to theapp.html
Images appeared with the default webpack.config.js except a splash image used in the top index.ejs.
The splash image is used before /static/styles.css and the image loader start working.
While images do not work, icons work. So, you can use an icon such as restore_page icon as this index.ejs.
Good News: The CSS issue is gone and it works
Bad News: Still
Unable to find module with ID: aurelia-materialize-bridge/autocomplete/autocomplete
Indeed by looking at the dependency graph those are missing, but some are there. Remember: Everything is there when using the ModuleDependencyPlugin.
You found the classical “two jqueries” issue! 😃
Ha, there is already a ticket for this 😃 https://github.com/aurelia/webpack-plugin/issues/101