When I set webpack.config.js to run vue.js on rails6, I got too many errors and grass

Try to make webpack CLI work

Since webpack.config.js is set, I thought it would be nice if I could check if the setting was correct.

Since the file structure is like this, I tried executing the following command in the frontend directory.

webpack --config webpack.config.js

Then, the following is displayed.

webpack --config webpack.config.js
CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes

Apparently, I need a tool to run webpack with CLI. Do you want to install it? I was asked, so I honestly answered yes

Error: Cannot find module 'webpack-cli/package.json'

Then an error occurred. Hey why ...

npm install -g webpack-cli

So I decided to try global installation.

/usr/local/bin/webpack-cli -> /usr/local/lib/node_modules/webpack-cli/bin/cli.js
npm WARN [email protected] requires a peer of [email protected] || 5.x.x but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 46 packages from 31 contributors in 4.209s

Oh, it looks like it was installed.

with this

webpack --config webpack.config.js

You can now load webpack.config.js with this command. Hooray!

Next, let's move on to the settings of webpack.config.js.

Since I have settled down, I have summarized the errors I encountered and how to deal with them.

webpack --config webpack.config.js

When you hit this command, webpack.config.js will be loaded, so I will introduce the error that occurred there. If you don't clear this error, webpacl.config.js won't work ...

configuration.module has an unknown property 'loaders'.

configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

I encountered the above error when I wrote the following to load vue-loader

module: {
    loaders: [here
      {
        loader: 'vue-loader'

Hey! why! However, he gave me an alternative plan, so I decided to follow it.

Did you mean module.rules or module.rules.*.use?

module: {
    rules: [
      {
        loader: 'vue-loader'
      }
    ]
  },

Resolved by modifying loaders to rules.

TypeError: this._init is not a function at Object.vue

TypeError: this._init is not a function
    at Object.Vue 

It seems that the constructor of the vue object is not working. When I looked it up, it was resolved immediately.

module: {
    rules: [
      {
        loader: 'vue-loader'
      }
    ]
  },

It was necessary to set to load vue-loader in the loader part.

[vue-loader] vue-template-compiler must be installed as a peer dependency,

There seems to be no setting. After checking, it seems that you should install compiler as instructed

npm install vue-template-compiler --save-dev

This solves

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

Somehow, this time it comes out when there are not enough plugins.

After checking this, I noticed that I should install the plugin in webpack.config.js, and described as follows

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
 (abridgement)
  plugins: [new VueLoaderPlugin()]
}

If you do not write require, the following error will occur.

ReferenceError: VueLoaderPlugin is not defined

No matching rule for .vue files found.

I also checked this and found that it is necessary to set to read vue in config, so it is described as follows

module: {
    rules: [
      {
        test: /\.vue$/, #here
        exclude: /node_modules/,
        loader: 'vue-loader'
      }
    ]
  },

Changed to read .vue in the test part.

The output directory as absolute path (required).

output: {
    path: `${__dirname}/../public/javascripts`,
    filename: '[name].js'
  },

If output.path in config is a relative path, the above error will occur. However, it is inconvenient later if it is an absolute pass. When I looked it up, I found that it would be better to use dirname, so I used it. This seems to be a variable of the current path, and it seems to refer to it with an absolute path.

So, after overcoming the error so far, config finally works.

webpack --config webpack.config.js

If you do this

It outputs the js written in output using the entry file.

This time, I output it to puclic's javascripts directory.

If you do not set it a little more, it seems that it will not work with the rails application, so I will continue to implement it ...

【reference】

-How to write without using absolute path specification in webpack.config.js

https://qiita.com/tmak_tsukamoto/items/8f8fc2be80542e3400d6

・ VueLoaderPlugin Error] No matching rule for .vue files found --when files have different extension than .vue

-[Webpack] vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

https://qiita.com/7110/items/0721525ed6ccc263768b

-[Webpack] [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

https://qiita.com/7110/items/e6fba3dce01ea85bddb7

-Module build failed: TypeError: this._init is not a function

https://github.com/vuejs/vue-loader/issues/409

-The loaders property cannot be used! What to do when you are told

https://qiita.com/kogache/items/1f0740e332f4674eb5b3