Webpack 4.x react開発環境を構築する方法手順

本稿ではWebpack 4.xでreact開発環境を構築する方法手順を紹介し、皆さんに分かち合い、自分にもメモを残します。
一覧（npm install）に依存してインストールする必要があります。

"dependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "react": "^16.4.2",
  "react-dom": "^16.4.2",
  "webpack": "^4.16.5"
  ...
}

バベルシリーズは何をするものですか？エス6以上の高級文法のコンパイルをサポートするためです。しかし、reactにはjsxというものがありますので、単純なbabelは足りません。また、webpackにbabelを作用させるには、webpackにloaderを追加する必要があります。

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var deps = [ 
 ];

//        ，        noParse，                ，         process   ，   ！
var config = {
  //        
 entry: path.resolve(__dirname, './react/app.js'),
 resolve: {
  alias: {
  }
 },
 //        ./build/bundle.js   
 output: {
  path: path.resolve(__dirname, './build'),
  filename: 'bundle.js',
 },
 mode: 'development',
 module: {
   //     ，loader     ，        ， Webpack          
  rules: [
    {
     test: /\.js$/,
     exclude: /(node_modules|bower_components)/,
     use: {
      loader: 'babel-loader',
      options: {
        //     module  
       presets: ['babel-preset-env']
      }
     }
    }
   ]
 }
};

//             ，   node_modules            
deps.forEach(function (dep) {
  var depPath = path.resolve(node_modules, dep);
  config.resolve.alias[dep.split(path.sep)[0]] = depPath;
  config.module.noParse.push(depPath);
 });

module.exports = config;

以上のコードはそのまま使えますので、コメントを削除してください。以上のファイル構成があります。直接にpackage.jsonにscriptsを追加して、あなたのアプリ.jsを包装します。

...
"scripts": {
  ...
  "build-config": "webpack",
  ...
}
...

npm run build-configを実行すれば、包装作業ができますが、今までにもエラーが発生します。babelの設定が足りないので、webpack包装時にjsx文法を識別できません。いつjsx文法がありますか？jsコードに書かれているdom構造のようなものです。

...
<h1 onClick={this.handleClick.bind(this)} style={{ color: "red" }}>
  {'Hello ' + this.state.text}
</h1>
...

これを解析するには追加が必要です。Babelrcファイルは、その中に追加されます。

{
  "plugins": ["transform-react-jsx"]
}

これは主にbabelが包装に参加する時、jsxを使ってjsのプラグインに変換することができます。ここに来たらもう成功しました。ご希望のbundle.jsを打ちます。

> webpack

Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: 2018-08-14 15:19:14
  Asset   Size Chunks       Chunk Names
bundle.js 715 KiB  main [emitted] main
Entrypoint main = bundle.js
[./react/app.js] 2.74 KiB {main} [built]
  + 21 hidden modules

webpackパッケージの利点はここです。このようなパッケージは全部で715 kbで、使われていないモジュール21個が隠されています。これはなぜ足場を組んで開発したのですか？
jsx-transformのピット
またもう一つ言いたいのは、Reactを導入する時に、全体を導入してください。あるいは、コンパイル後のコードに使用されるかもしれないapiを追加して導入してください。でないと、何かが見つからないとページが読み込めなくなります。コンパイルしたコードを見てください:

var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
...
_createClass(MyTitle, [{
key: "handleClick",
value: function handleClick() {
  this.setState({
  text: "Clicked"
  });
}
}, {
key: "render",
value: function render() {
  return _react2.default.createElement(
  "h1",
  { onClick: this.handleClick.bind(this), style: { color: "red" } },
  'Hello ' + this.state.text
  );
}
}]);

reactを導入しないと，コンパイル後のrender関数の中の_react 2はReact.creat Elementであり、Reactは明らかにこの変数が見つかりません。コンパイルしたコードを見たら、もっと理解できるかもしれません。えっと、jsxのdomにそのように書くと、こういう意味ですか？
Vscode中開発は、eslintを配置する必要があります。
reactには大量のes 6の書き方があります。eslintを配置しないと大量の赤みが見られます。まずプロジェクトの開発環境に依存しています。

"devDependencies": {
  ・・・
  "eslint": "^5.3.0",
  "eslint-plugin-import": "^2.14.0"
  ・・・
}

プロジェクトルートに追加します。eslintrc.jsonには、下記のコードを追加します。

{
 "parserOptions": {
   //   ecma  
  "ecmaVersion": 6,
  "sourceType": "module",
  //  jsx  
  "ecmaFeatures": {
   "jsx": true
  }
 },
 "rules": {
   //  console   
  "no-console": "off",
  "semi": ["error", "always"]
 }
}

参考:

eslint公式文書

babel-plugin-transform-jsx文書

webpack 4.15.1公式文書

babelrc配置ドキュメント

React+Webpackのクイックマニュアル（時代遅れですが、一部は適用されませんでしたが、コードの一部を参考にしました）

阮一峰の4授業の時の訓練授業、時代遅れですが、でもやはりあなたを連れて前端の開発を体験することができます。

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。