makkaba/react_setting_2018.md

## react_setting_2018.md

      
    Raw
  

              react_setting_2018.md
            
          
    이것 저것 해보면서 모아봤습니다.
save-dev 설치

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties babel-loader css-loader html-loader html-webpack-plugin node-sass react react-dom react-hot-loader sass-loader style-loader webpack webpack-cli webpack-dev-server

save 설치

npm install --save react react-dom

file structure

├── dist  
│   ├── bundle.js(generated)
│   └── index.html(generated)
├── package.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js
└── .babelrc

webpack.config.js

const webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
            "style-loader", // creates style nodes from JS strings
            "css-loader", // translates CSS into CommonJS
            "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
    }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};
package.json

  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  },

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
);

module.hot.accept();

/src/index.html

<html>
    <head></head>
    <body>
        <div id="app"></div>
    </body>
</html>
.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}