Skip to content
Webpack4 + Babel7 + React sample
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
README.md
package.json
webpack.config.js
yarn.lock

README.md

Webpack4 + babel7 + React sample

Webpack4 + babel7 + React を動作させるサンプル

HOW TO RUN

以下を実行

Devサーバー

$ ./node_modules/.bin/webpack-dev-server
or
$ yarn run start

http://localhost:8080 にアクセス

ビルド

$ yarn run webpack
or
$ yarn run build

index.htmlを開く

導入時メモ

yarn導入

$ brew install yarn

package.jsonの作成

$ yarn init -y

Webpack導入

$ yarn add webpack webpack-cli --dev

webpack-dev-server導入

$ yarn add webpack-dev-server --dev

babel導入

$ yarn add @babel/core @babel/preset-env babel-loader --dev

React導入

$ yarn add react react-dom
$ yarn add @babel/preset-react --dev

.gitignore追加

$ echo node_modules > .gitignore

設定・関連ファイルの準備

webpack.config.js の準備。

$ touch webpack.config.js # write code...

jsファイルの準備。

$ mkdir src
$ touch src/index.js # write code...
$ touch src/sub.js # write code...

参考

最新版で学ぶwebpack 4入門 - Babel 7でES2019環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA https://ics.media/entry/16028/

AUTHOR

okutani

You can’t perform that action at this time.