React와 Firebase로 앱 개발하기 - 파이어베이스(Firebase)로 React 앱 배포 (CopyWebpackPlugin 버전 에러 관련 문제 해결 완료....)

//vscode 터미널에서
//이 버전은(@6.2.1) 나중에 webpack.config.js 에서 

 plugins: [
        new CopyWebpackPlugin([{
            context: './public',
            from: '*.*'
        }]),
    ],
    
//이렇게 처리해줘야한다. 

yarn add --dev copy-webpack-plugin@6.2.1 

webpack.config.js ()

'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
    entry: {
        main: ['./src/main.js']
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, './src'),
            loaders: 'babel-loader'
        }]
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { context: './public', from: '*.*' }
            ]
        }),
    ],
    devServer: {
        contentBase: './public',
        host: 'localhost',
        port: 8080
    }
}

 

혹은,

 npm uninstall copy-webpack-plugin //이전에 설치되었던 버전 삭제하기 
 npm install copy-webpack-plugin@4.6.0

 

해주고 webpack 파일에서는 pattern 을 지운다.

 

webpack.config.js ()

'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        main: ['./src/main.js']
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, './src'),
            loaders: 'babel-loader'
        }]
    },
    plugins: [
        new CopyWebpackPlugin([{
            context: './public',
            from: '*.*'
        }]),
    ],
    devServer: {
        contentBase: './public',
        host: 'localhost',
        port: 8080
    }
}

 

 

이렇게 까지 하고 나서, firebase 를 활용하여 콘솔창에서 바로 배포 가능하도록 세팅하기

//firebase 를 활용하여 콘솔창에서 바로 배포 가능하도록 세팅하기

yarn add firebase-tools
yarn build // firebase에 배포를 위해서 실행하기. root 폴더에 build 파일이 생길것이다.

 

참고문서

forum.framework7.io/t/impossible-to-compile-app-compilation-getcache-is-not-a-function/12661/5

Impossible to compile app.... compilation.getCache is not a function

firebase login // 로그인이 먼저 안되어 있다면 실행해주기
firebase init 

방향키 -> 엔터 -> 스페이스 눌려야지 다음 항목으로 넘어간다.

 

 

 

firebase deploy // firebase 를 통해 웹서버에 배포하기

.gitignore

node_modules
build
.firebase/
firebase.json
.firebaserc