webpack-base | A webpack base for your project sparkles | Plugin library

I have Vue v2 SPA. This is standard application as it can be. Let it be hello-world from the documentation. Let's make it and build:

I'm trying to use the optimized, es6 build of Mobx, as per the documentation:

Tip: the main entry point of the MobX 5 package ships with ES5 code for backward compatibility with all build tools. But since MobX 5 runs only on modern browsers anyway, consider using the faster and smaller ES6 build: lib/mobx.es6.js. For example by setting up a webpack alias: resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}

https://mobx.js.org/README.html#browser-support

This allows me to import mobx and get the mobx.es6.js build:

I'am trying to handle development and production eviroment variables in my webpack configuration (see https://webpack.js.org/guides/production/), but it fails with

I have debug-time Typescript decorator @log, which logs input/output/stats of the decorated functions.

I'd like to totally strip this particular @log decorator when compiling release version.

It is easy to remove console.log statements from the release build or do things conditionally in the decorator code, but I would like to make sure there's no overhead with calling decorator function itself.

Is there any way this can be achieved with Typescript?

My project is webpack-based. If this is not possible with Typescript, maybe this can be done at later stage with Babel plugin, with UglifyJS or some other alternative plugin?

We have a hybrid Angular app that uses karma for unit testing. I'm trying to add our first suite of tests but I'm getting some errors that indicate karma cannot find the dashboard.component.html.

View:

Building a MEVN application.

When running in my development environment, there are two servers running concurrently: webpack-dev-server at localhost:8080 serving up the Vue/Webpack-based front-end client application, and localhost:8081 serving the Node+Express back-end application which provides the RESTful endpoints that the client consumes.

When deploying for production, however, the Node+Express server, in addition to providing those endpoints, also serves the static Vue/Webpack application as described in this answer.

My issue is this: To call one of those endpoints from the client in the production environment, since they're all coming from the same server, I can just load /route/to/my/endpoint?param=val or similar. In the dev environment, since they're two separate servers, I'd load http://localhost:8081/route/to/my/endpoint?param=val instead.

It seems like there must be some trivial way to include the http://localhost:8081 in the code when running the webpack-dev-server, but omit it when building for deployment.

I've seen a few articles talking about the publicPath webpack config item, but none of them are quite addressing this issue in a way that makes sense to me.

What's the "right way" to do this?

I'm building a Single Page (Web) Application. I'm quite smitten by Rails v5.0, especially its built-in API capabilities.

In the past I've built JavaScript frontends using Vue.js, usually with the templates provided by the Vue-CLI project. This allows deployment of Vue component-based static sites basically anywhere. It's great.

Now, Rails 5.1 has some built-in Webpack and Yarn features which look pretty compelling too. I'm not sure how to proceed with my new application.

My questions:

• What are the pros/cons of integrating Webpack and Vue into Rails itself, using the Webpacker extensions available in Rails v5.1? I intend to deploy to Heroku.
• On the other hand, what are the pros/cons of using the Rails API-only mode for the backend, and maintaning the Vue/Webpack-based frontend in its own directory? I'd keep everything in the same repository, deploy the backend via Heroku, and the frontend via a static host like Netlify.
• Which approach would have more cognitive overhead or technical complexity?

Over the past few days, I've been looking around, and I've not found much concise information on the web about this. People seem interested in the auto-reloading features of the Rails development environment, but I get that for free already with Vue-CLI.

As far as I can discern, these are reasons for keeping them separate:

• Deployment of the frontend is pretty darn simple to anywhere.
• The Webpacker mode for Rails is very new, and not many tutorials or guides exist yet, especially regarding integration testing. Keeping things separate means that my existing testing apparatus should still apply.

Here are some pros for integrating the two parts together:

• The possibility of using static assets both for the frontend and possibly for server-generated pages in the future, should that be necessary.
• Buy-in to "the Rails way", with implied future maintenance by the Rails team.
• the JS Frontend would not need to be hosted separately.
• Don't need to worry about CORS (?)

What other concrete benefits exist for either approach?

I'm using webpack for build my application (angular2/typescript) and I reach create two files, one for my code and one for vendors. But i want a third file for separate my config (principally for API_ENDPOINT) which is used directly in my code.

How can I use my config file (config.ts) for build my app with loaders but exclude it from the generated Js file ?

Currently

I've an old application that is at Java 1.6, Servlet 2.5 and deployed as WAR on a Websphere Application Server 7.x version. Now, I'm trying to add a newly written page with Angular2 framework and typescript.

My web.xml has the following servlet mapping.