この記事では、Webpack+Babel+React 開発環境を構築するための詳細な手順を主に紹介します。興味のある方は参考にしてください。
1. 構築する前に知っておくべきこと。 Webpack は、さまざまなファイル (ReactJS、Babel、Coffeescript、Less/Sass など) をモジュールとしてコンパイルしてパッケージ化できるモジュール パッケージ化ツールです。
2. Webpack をインストールします
プロジェクトでの開発に Webpack の使用を開始するには、まずグローバル環境に Webpack をインストールする必要があります。
npm install webpack -g
3. プロジェクトを作成します
インストール後、learn-webpack という名前のプロジェクトを作成し、プロジェクトフォルダーに任意の名前を付けることができます。
mkdir learn-webpack && cd learn-webpack
次に、2つのファイルを作成しましょう: 
document.querySelector('#app').innerHTML = 'Hello World!';
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn-webpack</title> </head> <body> <p id="app"></p> <script src="dist/bundle.js"></script> </body> </html>
最後にローカル http サービスを開始するために実行します
ブラウザに Hello world! が表示されたら、Webpack を使用して main.js を Bundle.js にパッケージ化してコンパイルしたことを意味します。 
設定ファイルを定義する
上記は、Webpack の使用方法の簡単な紹介にすぎません。実際、すべてのプロジェクトには、何を行う必要があるかを Webpack に伝えるための webpack.config.js が含まれている必要があります。
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
}
}エントリ: パッケージ化するエントリ ファイルを指定します
1. 単一のファイルを単一の出力ファイルにパックします。例: エントリ: "main.js"
2。ファイルを 1 つの出力ファイルにまとめるには、ファイル名を配列に入れます。例:entry:['main.js','xx.js']3. 複数のファイルを複数の出力ファイルにパックし、ファイル名を に入れます。キー ペア、例: エントリ: {a:'main.js',b:'xx.js'}出力: パッケージ化結果を設定します
パスは定義された出力フォルダー、ファイル名は名前ですパッケージ化結果ファイル (指定されている場合) パッケージ化エントリ ファイルは上記の 1 または 2 の場合で、ファイル名は出力するファイルの名前を直接指定します。 3 番目の場合、ファイル名は [名前].ファイル名.js のように記述する必要があり、ファイル名の [名前] がエントリのキーになります。
変更を監視し、自動的にパッケージ化しますコードに変更を加え続ける場合は、一度変更しないように、手動で再度パッケージ化します。 webpackのwatch機能を利用することができます。 webpack --watch または webpack -w または、設定コードで watch を直接 true に設定することもできますmodule.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
watch: true
}4. Babel の使用
Babel とは何ですか? Babel は JavaScript コンパイラーです。これを使用して ES6 構文を ES5 構文に変換し、現在の環境で実行できるようにします。
ターミナルで実行します: npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev インストールが完了したら、以前の webpack.config.js を次のように変更する必要があります:module.exports = {
entry: "./app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['','.coffee','.js']
}
}var func = str => {
console.log(str);
};
func('我现在在使用Babel!');loader: 'babel-loader?presets[]=es2015
query: {
presets: ['es2015']
}WebpackとBabelをすでに構成し、いくつかの導入を行いました。 , 基本環境はすでにセットアップされているので、React を使い始めます。
ターミナルに次のコードを入力してreactとreact-domをインストールしますnpm install react react-dom --save
npm install babel-preset-react --save-dev
reactのデフォルトのプラグインを追加したため、webpack.config.jsには次のコードが必要です変更される予定です。
モジュール -> ローダーの下のクエリを次のように変更します:
query: {
presets: ['es2015','react']
}次に、hello.js という名前のファイルを作成します
import React from "react";
class Hello extends React.Component{
render() {
return (
<p>
Hello, World!
</p>
)
}
}
export default Hello;次に、app.js 内のファイルを次のように変更します:
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";
// var func = str => {
// console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector('#app').innerHTML = 'Hello World!';
ReactDOM.render(
如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下
如何解决iview 的select下拉框选项错位的问题，具体操作如下
以上がWebpack+Babel+React環境構築に対する詳しい回答（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
