ホームページ > 記事 > ウェブフロントエンド > Webpack+react開発環境の構築方法
今回は、webpack+react 開発環境の構築方法と、webpack+react 開発環境を構築する際の注意点について、実践的な事例を交えて紹介します。
環境は主にバージョンに依存します
webpack@4.8.1
webpack-cli@2.1.3
webpack-dev-server@3.1.4
react@ 16 .3.2
babel-core@6.26.3
babel-preset-env@1.6.1
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が必要ですそれを変換します。
babel-croeはbabelコアファイルです
babel-preset-env ES6をES5に変換します
babel-preset-react JSXをjsに変換します
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中文网其它相关文章!
推荐阅读:
以上がWebpack+react開発環境の構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。