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

Most upvoted comments

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

MaximBalaganskiy on Jan 16, 2018

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/37
secondly, 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.

MaximBalaganskiy on Jan 16, 2018

@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 the app.html

const fs = require('fs');
const path = require("path");
const webpack = require("webpack");
const { AureliaPlugin, ModuleDependenciesPlugin, GlobDependenciesPlugin } = require("aurelia-webpack-plugin");
const bundleOutputDir = "./wwwroot/dist";
const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);

module.exports = (env) => {
	const isDevBuild = !(env && env.prod);
	return [{
		entry: { "app": ["aurelia-bootstrapper"] },
		resolve: {
			extensions: [".ts", ".js"],
			modules: ["ClientApp", "node_modules"]
		},
		output: {
			path: path.resolve(bundleOutputDir),
			publicPath: "dist/",
			filename: "[name].js",
			chunkFilename: "[name].js"
		},
		module: {
			rules: [
				{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: "url-loader?limit=100000" },
				{ test: /\.ts$/i, include: [/ClientApp/, /node_modules/], use: "ts-loader?silent=false" },
				{ test: /\.html$/i, use: "html-loader" },
				{ test: /\.css$/i, use: isDevBuild ? "css-loader" : "css-loader?minimize" },
				{
					test: /\.scss$/i,
					use: [
						{ loader: isDevBuild ? "css-loader" : "css-loader?minimize" },
						{ loader: "sass-loader" }
					]
				}
			]
		},
		plugins: [
			new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
			new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
			new AureliaPlugin({ aureliaApp: "configure", includeAll: "ClientApp" }),
			new ModuleDependenciesPlugin({
				"aurelia-authentication": ["./authFilterValueConverter"],
				//"aurelia-chart": ["./elements/chart-element", "./attributes/chart-attribute"]
			}),
			new webpack.optimize.CommonsChunkPlugin({
				"name": ["vendor"],
				"minChunks": (module) => {
					return module.resource && (module.resource.startsWith(nodeModules) || module.resource.startsWith(realNodeModules));
				},
				"chunks": ["app"]
			})
		].concat(isDevBuild ? [
			new webpack.SourceMapDevToolPlugin({
				filename: "[file].map", // Remove this line if you prefer inline source maps
				moduleFilenameTemplate: path.relative(bundleOutputDir, "[resourcePath]")  // Point sourcemap entries to the original file locations on disk
			})
		] : [
				new webpack.optimize.UglifyJsPlugin()
			])
	}];
};

MaximBalaganskiy on Jan 16, 2018

Now my app seems running except it couldn’t load images from the img folder.

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.

<html>
  <head>
    <meta charset="utf-8">
    <title><%- htmlWebpackPlugin.options.metadata.title %></title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">
    <!-- imported CSS are concatenated and added automatically -->
  </head>

  <style>
    .splash {
      text-align: center;
      margin: 10% 0 0 0;
      box-sizing: border-box;
    }

    .splash .message {
      font-size: 20px;
      /* add as you like */
    }

    .splash .loading {
      text-align: center;
      display: inline-block;
      margin-top: 40px;
      font-size: 42px;
      color: #ee6e73;
    }
  </style>
  
  <body aurelia-app="main">
      <div class="splash">
        <div class="message">Loading <%- htmlWebpackPlugin.options.metadata.title %></div>
        <i class="loading material-icons">restore_page</i>
      </div>
      <% if (htmlWebpackPlugin.options.metadata.server) { %>
      <!-- Webpack Dev Server reload -->
      <script src="/webpack-dev-server.js"></script>
      <% } %>
  </body>
</html>

HIRANO-Satoshi on May 26, 2017

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.

grafik

eikaramba on Apr 12, 2017

You found the classical “two jqueries” issue! 😃

Thanood on Apr 12, 2017

Ha, there is already a ticket for this 😃 https://github.com/aurelia/webpack-plugin/issues/101

eikaramba on Apr 11, 2017