vue.js를 rails6에서 실행하기 위해 webpack.config.js를 설정하면 오류가 발생하고 잔디

webpack CLI를 실행할 수 있도록 시도

webpack.config.js를 설정하고 있기 때문에 그 설정이 올바른지 확인할 수 있으면 생각해 보았다.



이러한 파일 구성으로 하고 있기 때문에 frontend 디렉토리에서 이하의 커멘드를 실행해 보았다.

webpack --config webpack.config.js

그러면 다음과 같이 표시됩니다.

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

분명히 webpack을 CLI로 움직이기위한 도구가 필요할 것 같습니다. 설치하시겠습니까? 듣고 있기 때문에 솔직하게 yes와 대답

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

그러면 오류가 발생했습니다. 어이어이어서...

npm install -g webpack-cli

그래서 어쩔 수 없이 글로벌 설치를 시도하는 것.

/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

오, 설치할 수 있었던 것 같습니다.

이것으로

webpack --config webpack.config.js

이 명령으로 webpack.config.js를 읽을 수 있습니다. 했어!

다음은 webpack.config.js의 설정으로 이동하자.

일단락했기 때문에 조우한 에러와 대처법을 정리했다.

webpack --config webpack.config.js

이 명령을 치면 webpack.config.js를 읽어주기 때문에 거기서 나온 에러를 소개. 이 오류를 해결하지 않으면 webpacl.config.js가 작동하지 않으므로 ...

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`).

vue-loader를로드하기 위해 다음과 같이 작성했는데 위 오류가 발생했습니다.

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

어이! 어째서! 가 되었지만 대체안도 내 주었기 때문에 거기에 모방하기로 했다.

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

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

loaders를 rules로 수정하여 해결.

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

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

vue 객체의 생성자가 움직이지 않는 것 같은 느낌. 조사하면 즉시 해결했다.

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

loader 부분에서 vue-loader를 로드하는 설정이 필요했다.

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

왠지 설정이 없을 것 같다. 조사한 대로 지시된 대로 compiler를 인스톨하면 좋을 것 같다

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

이것으로 해결

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

왠지 이번에는 plugin이 부족하다고 나온다.

이것도 조사하면 webpack.config.js 내에서 플러그인을 도입하면 좋다는 것을 알고, 다음과 같이 기술

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

require를 작성하지 않으면 다음 오류가 발생합니다.

ReferenceError: VueLoaderPlugin is not defined

No matching rule for .vue files found.

이것도 조사한 결과 config 내에 vue를 읽는 설정이 필요하다는 것으로 다음과 같이 기술

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

test 부분에서 .vue를 로드하도록 했다.

The output directory as absolute path (required).

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

config의 output.path가 상대 경로이면 위 오류가 발생합니다. 하지만 절대 패스라고 하면 불편. 라고 생각해 조사하고 있으면 dirname이라고 하는 것을 사용하면 좋다고 했으므로 사용. 이것은 현재 있는 패스를 변수화하는 것 같고 절대 패스로 참조해 주는 것 같다.

그래서, 지금까지 에러를 극복하면 드디어 config가 움직이게 되었다.

webpack --config webpack.config.js

이렇게 하면

entry의 파일을 사용해 output에 쓰여진 js를 출력해 준다.

이번에는 puclic의 javascripts 디렉토리에 출력했다.



좀 더 설정하지 않으면 rails 앱으로 움직일 것 같아서 계속 구현 노력합니다 ...

【참고】

· webpack.config.js에서 절대 경로 지정을 사용하지 않고 표기하는 방법

·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.에 대한 대처법

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

·Module build failed: TypeError: this._init is not a function으로 나왔다

・loaders 프로퍼티를 사용할 수 없다! 라고 했을 때의 대처법