react-webpack-stepbystep.md

React with webpack and babel

Initial Project

建立一個空專案並且產生 package.json

mkdir myapp
cd myapp
npm init -y

• npm init 使用 -y 可以略過所有問題

Install Webpack, React and Babel

Install Webpack

npm i webpack@4 webpack-cli@3 -D

• -D: -save-dev

Install React

npm i react@16 react-dom@16 -S

• -S: --save

Install Babel

npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D

Install html-webpack-plugin

npm i html-webpack-plugin -D

Install webpack-dev-server

npm i webpack-dev-server -D

並修改 package.json

    ...
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
    ...

Install css-loader and style-loader

npm i css-loader style-loader -D

建立 webpack.config.js 與 .babelrc

webpack.config.js

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}