2022/11/01 - TIL

툴체인

Git

git init

npm

npx add-gitignore osx windows node visualstudiocode
npm init -y

initial file

mkdir public&&touch public/index.html
mkdir src/utils && touch src/main.js &&touch src/utils/index.js

browserslistrc

> 0.5% in KR
last 2 versions
not dead
ie 11

webpack

touch webpack && touch webpack/common.js
touch webpack/dev.js&&touch webpack/prod.js
touch webpack/server.js

//webpack/common.js
import { resolve } from 'node:path';

const commonConfig = {
  target: 'browserslist',
  entry: {
    main: resolve('src/main.js'),
  },
//jsx 추가후 추가
  resolve:{
		extensions:['.js', '.jsx', '.json', '.wasm']
	},
//
	module:{
	rules:{
		test: /\\.tsx?$/i,
		exclude:/node_modules/,
		use: 'ts-loader'
	}
},
//
  output: {
    path: resolve('public'),
    filename: '[name].bundle.js',
  },
};

export default commonConfig;

//webpack/prod/js
import { merge } from 'webpack-merge';
import commonConfig from './common.js';

const devConfig = merge(commonConfig, {
  mode: 'development',
  devtool: 'eval-cheap-source-map',
});

export default devConfig;

//webpack/dev.js
import { merge } from 'webpack-merge';
import commonConfig from './common.js';
**import devServer from './server.js';**

const devConfig = merge(commonConfig, {
  mode: 'development',
  devtool: 'eval-cheap-source-map',
  **devServer,**
});

export default devConfig;

//webpack/server.js

const devServer = {
  host: 'localhost',
  port: 3000,
  hot: true,
  open: false,
  compress: true,
  liveReload: true,
  static: ['public'],
  historyApiFallback: true,
  client: {
    logging: 'info',
    overlay: true,
    reconnect: 3,
  },
  watchFiles: {
    paths: ['src/**/*.*', 'public/**/*.*'],
  },
};

export default devServer;

//package.json
{
	"scripts": {
    **"start": "npm run server -- --open",
    "dev": "npm run server",**
    **"server": "webpack server -c webpack/dev.js",**
    "bundle": "webpack bundle -c webpack/dev.js",
    "build": "webpack build -c webpack/prod.js"
  }
}

react

npm i react@17 react-dom@17

src/main.jsx

import { StrictMode } from 'react';
import { render } from 'react-dom';

const App = () => (

 

);

render(
  
    
  ,
  document.getElementById('root')
);