简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Webpack+react開発環境の構築方法

php中世界最好的语言
リリース： 2018-05-28 15:41:18
オリジナル
1493 人が閲覧しました

今回は、webpack+react 開発環境の構築方法と、webpack+react 開発環境を構築する際の注意点について、実践的な事例を交えて紹介します。

環境は主にバージョンに依存します

  1. webpack@4.8.1

  2. webpack-cli@2.1.3

  3. webpack-dev-server@3.1.4

  4. react@ 16 .3.2

  5. babel-core@6.26.3

  6. babel-preset-env@1.6.1

  7. bable-preset-react@6.24.1

webpackのインストールと設定

1 . 開始します

新しいプロジェクトディレクトリを作成し、npmを初期化し、新しい開発ソースディレクトリを作成します

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src
ログイン後にコピー

2. webpack-cli

webpackはバージョン4.xから始まります、webpackとwebpack-cliをインストールする必要があります同時に (このツールはコマンドラインで webpack を実行して使用されます)。 

npm install webpack webpack-cli --save-dev
ログイン後にコピー

3.wepback設定ファイル

プロジェクトのルートディレクトリに新しいwebpack.config.jsファイルを作成します。このファイルは、webpackを実行するためのコアファイルです。

webpack.config.jsの基本設定

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',              // 入口文件
  output: {                       // webpack打包后出口文件
    filename: 'app.js',               // 打包后js文件名称
    path: path.resolve(dirname, 'dist')  // 打包后自动输出目录
  }
}
ログイン後にコピー

package.jsonファイルのスクリプト設定

"scripts": {
  "build": "webpack"
}
ログイン後にコピー

この時点で、コマンドラインでnpm run buildを実行すると、webpackがプロジェクトのルートディレクトリでwebpack.configを自動的に見つけます。 js ファイルを使用してパッケージ化を実行します。 

npm run build
// webpack打包后的项目
├── dist
│  └── app.js       // 打包后的app.js
├── package.json
├── src
│  └── index.js      // 源目录入口文件
└── webpack.config.js
ログイン後にコピー

webpack.config.js モジュール関連の設定

webpack はすべてのファイルをモジュールとして扱い、画像、CSS ファイル、フォント、その他の静的リソースは js ファイルにパッケージ化されるため、より多くのローダー ファイルが必要になります。 URL を指定し、必要なローダー ファイルをいくつかインストールします。 

npm install style-loader css-loader url-loader --save-dev
ログイン後にコピー

module モジュールを webpack.config.js に追加します

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 }
}
ログイン後にコピー

ローダーを導入した後、src/index.js ファイルにインポートしたい css ファイルやその他の静的リソースをインポートできます。 

cd src && touch main.css
ログイン後にコピー

src/index.jsファイルはcss

import "./main.css";
ログイン後にコピー

webpack.config.jsプラグイン構成を導入します

メインのjsファイルと静的ファイルをjsファイルに正常にパッケージ化できたら、このjsファイルをHTML ファイルでは、Webpack プラグイン ***html-webpack-plugin*** がこれを実行し、HTML ファイルを自動的に生成し、パッケージ化された js ファイルを HTML に配置します。 

npm install html-webpack-plugin --save-dev
ログイン後にコピー

webpack.config.js はプラグインを設定します

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
 ]
};
ログイン後にコピー

npm run build を実行すると、dist ディレクトリに追加のindex.html ファイルがあることがわかります。 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>name</title>
 </head>
 <body>
 // 打包后的app.js已经被自动插入了html文件
 <script type="text/javascript" src="app.js"></script></body>
</html>
ログイン後にコピー

この時点で、webpack の最も単純かつ基本的な要件が設定されました。 この時点でのプロジェクト構造は次のとおりです: 

├── dist            // 生产目录
│  ├── app.js
│  └── index.html
├── package.json
├── src            // 源目录
│  ├── index.js
│  └── main.css
└── webpack.config.js
ログイン後にコピー

Reactのwebpack設定

reactをインストール

npm install react react-dom --save
ログイン後にコピー

reactをインストール、wepback変換は

ReactコンポーネントはJSXで構成されており、ブラウザはJSXを認識できず、babelが必要ですそれを変換します。

  1. babel-croeはbabelコアファイルです

  2. babel-preset-env ES6をES5に変換します

  3. babel-preset-react JSXをjsに変換します

  4. babel-loader webpack babe変換

コードをコピーします コードは次のとおりです:

npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev

.babelrc 設定ファイル

project ルート ディレクトリに新しい .babelrc ファイルを作成します。このファイルは Babel のコア構成であり、プロジェクトのルート ディレクトリで自動的に認識されます。 

// .babelrc
{
 "presets": ["env", "react"]
}
ログイン後にコピー

webpack babel-loader 設定

// 在webpack.config.js 的modules.rules中加入此配置
{
 test: /\.(js|jsx)$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader'
 }
}
ログイン後にコピー

html-webpack-plugin テンプレート設定

React はページのルート要素を取得する必要があることがわかり、その後レンダリングが有効になります。新しい HTML ファイルを作成できます。 let html-webpack- プラグイン プラグインは、このファイルに基づいてアイテムをパッケージ化します。

そこで、ルート ディレクトリに新しい html ファイルを作成し、このファイルをテンプレートとして使用します。 

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
    // react需要的渲染根元素
 <p id="root"></p>
</body>
</html>
ログイン後にコピー

この時点での webpack.config.js 設定: 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  // 模板文件位置
 }) 
 ]
};
ログイン後にコピー

React を書いて webpack を実行します

// src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import './main.css'
ReactDom.render(
 <h1>hello world</h1>,
 document.getElementById('root')
);
ログイン後にコピー

运行npm run build，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染"hello world"。

dev环境热更新配置

react的wepack完成以后，是不是发现每修改一次代码，想看到效果，得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。

安装webpack-dev-server

npm install webpack-dev-server --save-dev
ログイン後にコピー

webpack.config.js 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  
 }),
 // hot 检测文件改动替换plugin
 new webpack.NamedModulesPlugin(),   
 new webpack.HotModuleReplacementPlugin() 
 ],
    // webpack-dev-server 配置
 devServer: {
 contentBase: './dist',
 hot: true
 },
};
ログイン後にコピー

运行webpack-dev-server

在 package.json 文件 加入 scripts 配置：

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},
ログイン後にコピー

命令行运行 npm run dev

可以在浏览器中输入localhost:8080 内容即为dist目录下的index.html内容。修改src/index.js中的内容或者依赖，即实时在浏览器热更新看到。

至此，react的webpack的基础开发环境已全部配置完毕。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用JS实现调用本地摄像头

怎样使用JS实现3des+base64加密解密算法

以上がWebpack+react開発環境の構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
web 開発する
ソース：php.cn
前の記事：JavaScript パフォーマンス最適化のためのタイムシェアリング関数の紹介 次の記事：ブートストラップ テーブルのツールバーを使用して新しい条件付きクエリを追加する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React で制御される要素を理解する方法 React で制御された要素を理解するにはどうすればよいですか?状態制御を使用しますか? React で制御された要素を理解するにはどうすればよいですか?状態制御を使用しますか?
から 2023-11-16 14:51:10
0
1
106
タイトルを次のように書き換えました: React と typescript を使用した Vite での動的コンポーネントのインポートにより高速リフレッシュが失敗する マルチステップフォームを作成しようとしていますが、このような定数のデータを別のファイルに入れています import{lazy} from 'react';exportconstst...
から 2023-11-10 20:45:29
0
1
505
エラーが発生しました: npm install && npm run dev の実行中に問題が発生しました - Vite - Laravel UI React 皆さん、こんにちは。今日、問題が発生しました。react を使用して laravelui をインストールし、npminstall ステップに渡すときにエラーが発生しました。そのため...
から 2023-11-10 17:43:07
0
1
278
Laravel 8のブレードアセットを使用して画像を表示しますが、リソースサブフォルダーからロードします 私はLaravelにかなり慣れていないので、ご容赦ください。 Node/Reactで開発したフレームワークをLaravelにコピーしています。現在、メインのアーキテクチャを調整し、...
から 2023-11-09 12:47:02
0
1
314
About Me ページでダウンロードされる chrome-extension:// installHook.js とは何ですか? 最近、Three.js を使用していくつかの Web ページを作成しました。 Chrome でダウンロードされているものを確認すると、installHook.js というファイルが...
から 2023-11-04 23:40:49
0
2
282
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！