# Set up React from webpack
[Youtube 教學影片](https://www.youtube.com/watch?v=Zb2mQyQRwqc)
[Webpack 初學者教學課程 git](https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/)

  |- (/node_module)
  |- .gitignore
  |- package-lock.json
  |- webpack.config.js
  |- package.json
  |- /src
    |- index.js
    |- index.css
    |- index.html
  |- /dist
    |- index.html
    |- main.js

mkdir filename
cd filename
~/filename >>

> npm init -y

創建package.json

npm init -y
Wrote to /filename/package.json:

{
  "name": "filename",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

> npm install react react-dom

裝完在 package.json dependecies 裡會新增 "react" "react-dom"
node_modules 裡除了會有指定安裝的libraries還會有這些libraries需要用到的libraries可以在package-lock.json 看一看

~/filename >> ls
node_modules      package-lock.json package.json


//index.js
var React = require('react');
var ReactDOM = require('react-dom')
require('.index.css');

export class App extends React.Component {
    render() {
        return (
            <div>
            Hello World!
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

> --save-dev

dependencies 裡面放的是app跑起來會要用到的 libraries
devDependencies 裡面放的是app build會用到的

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

> touch webpack.config.js

webpack 的職責是module bundler 模組綑綁
app 大部分由多個模組構成 webpack 做的就是把他們結合成單一檔案，或是單一的模組，這樣你就可以把這一包在 index.html 引入

// webpack.config.js
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
//樓下的 module 要輸出一個物件
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    module: {
        rules:[
            { test: /\.(js)$/,use: 'babel-loader' },
            { test: /\.css$/, use:['style-loader', 'css-loader'] }
        ]
    },
     mode: 'development',
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

entry :描述進入點是這個 app的根檔案
output :在path裡給綑綁檔案的的輸出位置（例子裡是一個dist資料夾），以及在filenaname告訴他要把捆成一包的js叫什麼名字
module : 建立綑綁的規則
用正規表達式說任何在這個應用程式的js檔案或是js模組，用babel-loader
babel-loader 負責compile
任何css的要用style-loader css-loader

> html-webpack-plugin

這個 library 主要是為了讓index有一個參照的

ReactDOM.render(<App />, document.getElementById('app'))

> "@babel/preset-env"

這個讓我們可以用 class syntax

export class App extends React.Component

> "@babel/preset-react"

有了這個才能用 jsx轉譯

export class App extends React.Component

增加一個 babel 還有 script 的 properties 設定webpack babel-loader要用的東西和 ```npm run script``` 的指令

//package.json
...
  "main": "index.js",
  "babel":{
    "presets":[
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    //"test": "echo \"Error: no test specified\" && exit 1"
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
...