React 빌드(webpack) 환경 직접 구성하기 (without CRA)

# root 폴더(프로젝트를 시작할 폴더) 내부

yarn init -y 

# 여러 패키지 한 번에 설치하고 싶으면 패키지명 사이에 한 칸 space로 구분
# add 를 dependencies 에 설치내용이 추가됨
yarn add react react-dom react-prop-types @babel/runtime

# -D 플래그를 붙이면 devDependencies 에 설치해서 개발용으로 사용할 수 있음

yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime sass-loader node-sass css-loader style-loader html-webpack-plugin webpack webpack-dev-server webpack-cli -D

touch babel.config.js 
# vim 에디터로 위에서 만든 babel.config.js 열기
vi bable.config.js

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  // 여기 프리셋 및 플러그인에 추가한 것들을 babel-loader를 통해 webpack에서 사용한다.
  const presets = [['@babel/preset-env'], ['@babel/preset-react']];

  const plugins = [
    'react-hot-loader/babel',
    // class property 
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-runtime'
  ];

  return {
    presets,
    plugins
  };
};

touch webpack.config.js 
vi webpack.config.js 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');

const port = process.env.PORT || 8080;

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]'
              },
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [`${__dirname}/src/scss`],
              data: `@import 'variables';`
            }
          }
        ]
      },
      {
        test: /\.(svg|jpg|png)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 25000
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    }),
    new DefinePlugin({
      FetchUrl: JSON.stringify(
        'https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/todolist'
      )
    })
  ],
  devtool: 'inline-source-map',
  devServer: {
    host: 'localhost',
    port,
    open: true,
    historyApiFallback: true,
    hot: true,
    inline: true
  }
};

...
module.exports = {
  mode: 'development', //production
};

...
module.exports = {
  ...
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash].js'
  },
};

module.exports = { 
  ...
  module: {
      rules: [
        // bable-loader 
        {
          test: /\.(js)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        },
        // sass-loader
      	{
          test: /\.scss$/,
          use: [
            {
              loader: 'style-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[local]'
                },
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [`${__dirname}/src/scss`],
                data: `@import 'variables';`
              }
            }
          ]
        },
      ]
    }
}

/styles/commentlog.sass

.comment-log {
	background-color:#fff
}

// /src/App.js

// moduel 옵션으로 import 구문 사용 가능
// camelcase 옵션으로 .comment-log -> commentLog 변수 선언 가능
import { commentLog } from '../styles/commentlog.css

import '../scss/variable.scss'
import '../scss/mixin.scss'

// import '../scss/variable.scss'
// 대신 이렇게 작성이 가능하다. 
import 'variable.scss' 

...
module.exports = {
  ...
  devtool: 'inline-source-map',
  devServer: {
    host: 'localhost',
    port,
    open: true,
    // historyApiFallback: true, 현재 불필요함으로 제외
    hot: true
    inline:true
  }
};

//1. 페이지를 로딩하지 않는다.
$ webpack-dev-server

//2. 전체 페이지를 로딩 한다.
$ webpack-dev-server --inline

//3. 부분 로딩  또는 전체 페이지 로딩
$ webpack-dev-server  --inline --hot

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'
    }),
     new DefinePlugin({
      FetchUrl: JSON.stringify(
        'https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/todolist'
      )
    })
  ],
};

const { DefinePlugin } = require('webpack');
new DefinePlugin({
      FetchUrl: JSON.stringify(
        'https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/todolist'
      )
    })

class App extends Component {
  state = { todos: [], folded: false };

  async componentDidMount() {
    const errorMsg = ERROR_MSG.FETCh;
    try {
      // 아래 FetchUrl = 'https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/todolist'
      const response = await fetch(FetchUrl);
      if (!response.ok) throw new Error(errorMsg);

      const data = await response.json();

      if (!data.statusCode === 200) throw new Error(errorMsg);

      this.setState({ todos: data.body });
    } catch (err) {
      console.warn(err);
    }
  }

new webpack.EnvironmentPlugin({
  NODE_ENV: 'development',
  DEBUG: false
});


// 변수를 사용할 때는 아래와 같이 사용한다.
process.env.NODE_ENV

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
});

# root 폴더
mkdir public && cd $_ && touch index.html

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

# root 폴더
mkdir src && cd $_ && touch index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));

# root 폴더
mkdir components && cd $_ && touch App.js 

// react-hot-loader를 사용하기 위한 import
import { hot } from 'react-hot-loader/root';
import React from 'react';

const App = props => {
  return ( <div> 안녕하세요 저는 seldev 입니다 </div> );
};

// export 할 때 hot 함수를 실행시켜 내보낸다
export default hot(App);

|-- public
    |-- index.html
|-- src
    |-- components
        |-- App.js
   	|-- index.js
|-- node_modules
|-- babel.config.js
|-- package.json
|-- webpack.config.js
|-- yarn.lock

{
  "name": "javascript-web-todo",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/P-iknow/javascript-web-todo.git",
  "author": "P-iknow <apricotsoul@gmail.com>",
  "license": "MIT",
  "scripts": {
    // 이 부분을 추가했다.
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-prop-types": "^0.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.1.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "react-hot-loader": "^4.12.10",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}