ホームページ > 記事 > ウェブフロントエンド > Webpack+Babel+React環境構築に対する詳しい回答（詳細チュートリアル）
Webpack+Babel+React環境構築に対する詳しい回答（詳細チュートリアル）
- 亚连オリジナル
- 2018-06-12 17:59:201682ブラウズ
この記事では、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!';index.html
<!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>次に、ターミナルでwebpackを実行します。 js ./dist/bundle.js
最後にローカル 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"
}
} 次に、ターミナルで webpack を実行して、パッケージ化とコンパイルの結果が前の入力 webpack ./app.js ./dist/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']
}
}ファイル内のコードは ES6 構文で記述されています。テストして追加してみましょう: var func = str => {
console.log(str);
};
func('我现在在使用Babel!');ES6 は、コンソールに「現在 Babel を使用しています!」と表示される場合は、それを示すテキストを表示します。 Babel モジュールが正常にインストールされ、ES6 を使用してコードの記述を開始できることがわかります。 ローダー項目は、このタイプのリソースをロードするために使用されるローダーを示します。 test は、一致するリソースの種類を示す正規表現です。 exclude は無視するファイルを指定します。ここでは /node_modules/ を指定します。 クエリには 2 つの記述方法があり、1 つは文字列形式でローダー名を直接続ける方法です: loader: 'babel-loader?presets[]=es2015もう 1 つは、この記事で示されているとおりです:
query: {
presets: ['es2015']
}resolve.extensions は、プログラムが自動的に完了するサフィックスを示すために使用され、 拡張機能の最初のものは、サフィックスが必要ない状況に対応することに注意してください
WebpackとBabelをすでに構成し、いくつかの導入を行いました。 , 基本環境はすでにセットアップされているので、React を使い始めます。
ターミナルに次のコードを入力してreactとreact-domをインストールしますnpm install react react-dom --save
BabelにはReactのデフォルトのプラグインがすべて含まれています
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 サイトの他の関連記事を参照してください。