[JAVA] Succeeded in loading js manually compiled using webpack with rails6


Compile js manually using webpack without using gem webpacker which is included by default in rails. Load vue.js in the entry file and use component to create the appearance of the app. Load the js built using webpack with the rails app, and load the component into the app.

Current implementation details

Succeeded to display the h1 element defined by component in index.html.erb as shown in the image ChatVueApp.png

Today's implementation details

* Since gitignore was not reflected at the beginning, correct it by the following procedure.

  1. Edit gitignore

  2. Delete cache with the following command

git rm -r --cached . //Delete whole file cache

3.commit & push

After tweaking various settings, I was able to load js compiled with webpack properly

Conclusion I did the following

Change assets compilation target in application.rb

config.assets.paths << Rails.root.join("public/javascripts")

Increase the compilation target of js and css in assets.rb (application.rb seems to be good to write)

Rails.application.config.assets.precompile += %w(*.js *.css)
Rails.application.config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*(\.js|\.css)$/

Make manifest.js read files under publick/javascripts

//= link_directory ../../../public/javascripts .js

Doesn't it seem that files under public will not be read just by describing them in application.rb? Because it feels like it, I forcibly loaded it with manifest.js. There seems to be another way, for example, building a file compiled using webpack in assets/javascritps.

So, if you do rails s with this ...

** I was able to display the browser safely. ** **


Failed to mount component: template or render function not defined

What! ??

It looks like the component made with Vue.js cannot be read. Do you want to check it out ...

Hit such an article


Apparently it is necessary to set resolve.

So add the following description to webpack.config.js

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

This is a safe solution! !! !! !! He read the Hello! Set in component!






import Sidebar from './components/Sidebar.vue'
import ChatContainer from './components/ChatContainer.vue'

  export default {


import Vue from 'vue';
import App from './App.vue';

// App.Render vue as an entry
new Vue({
  el: '#app',
  render: h => h(App)


<div id="app"></div>


I don't understand why it was solved, so I organized it.

When using vue-loader or vueify, templates inside *.vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.

Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you still wish to use the full build instead, you need to configure an alias in your bundler:

(Reference: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only)

As far as I can see from this article, when using vue-loader, you can use the file in the runtime state, so you don't need to use the fully compiled file. But if you still want to use a fully compiled file, you need to set resolve

I think I'm saying. And this time I'm using vue-loader. In other words, maybe the way to read the vue file is not good? I'm not sure, but I could read it, so it's OK. Let's check again whether the performance is good or bad.

Recommended Posts

Succeeded in loading js manually compiled using webpack with rails6
Japaneseize using i18n with Rails
Try using view_component with rails
Things to keep in mind when using Sidekiq with Rails
[Rails6] The development that is done while manually compiling js using webpack was very smooth and impressed.
Sign in with Apple using gem's apple_id in Rails and cache Apple's JWK
Notes on using FCM with Ruby on Rails
Implement button transitions using link_to in Rails
Using Material Design for Bootstrap with Rails 5.2
Display images with exact AutoLayout ratio using image loading library Nuke in Swift