ゼロからreact+typescript足場を作ります.

参考文献:私はこのようにTypecript+Reactプロジェクト環境を構築しました。
基本設定
webpack 4+に基づく構築
インストールwebpack:

npm install webpack@4 webpack-cli@3 -D

設定を保存するための新しいフォルダbuild.

mkdir build

次に、これらのファイルをbuildフォルダの下に新規作成します.

config.js環境変数

proxy.jsプロキシ構成

webpack.common.js汎用構成

webpack.dev.js開発環境構成

webpack.prod.js生産環境構成

$ cd build

$ touch config.js proxy.js webpack.common.js webpack.dev.js webpack.prod.js

次に二つの依存パッケージをインストールします.

webpack-mergeは、汎用構成webpack.com mmon.jsと開発環境devまたは生産環境prodの構成を統合することができる.

cross-envは、プラットフォームにまたがって環境変数を設定し、使用してもよい.macとwindowの構成の異なる問題を解決する

.

npm install webpack-merge cross-env -D

変更package.jsonファイル:

"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.js"
}

構築に必要な環境変数を準備し、config.jsを修正する.

const SERVER_PORT = 9527
const SERVER_HOST = '127.0.0.1'
const PROJECT_NAME = "cli"
const isDev = process.env.NODE_ENV !== 'production'

module.exports = {
    isDev,
    PROJECT_NAME,
    SERVER_PORT,
    SERVER_HOST
}

次に、webpackプロファイルを準備します.

// webpack.common.js
const { resolve } = require('path')

module.exports = {
  entry: resolve(__dirname,"../src/index.js"),
  output: {
    filename: 'js/bundle.[hash:8].js',
    path: resolve(__dirname, '../dist'),
  },
}

//webpack.dev.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'development',
})

//webpack.prod.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production',
})

新規プロジェクト入口ファイル:

 src/
    - index.js

プロジェクトを開始
プロジェクトを起動するには、いくつかの設定依存パッケージが必要です.

html-webpack-pluginテンプレートファイルは、私たちが包装したリソースをhtmlに導入します.

webpack-dev-serverは、ローカルhttpサービスを開始し、熱更新、エージェントなどを構成することができる.

clean-webpack-pluginはフォルダを整理して、毎回包装した後に先に自動的に古いファイルを整理します.

copy-webpack-pluginは、リソースファイルをパッケージディレクトリにコピーする

.

npm install html-webpack-plugin webpack-dev-server clean-webpack-plugin copy-webpack-plugin -D

テンプレートの設定publicフォルダを新設して、中に私達のhtmlテンプレートファイルを入れます.

mkdir public
touch index.html

//index.html