web-dev-qa-db-ja.com

webpackTypeScriptを自動ビルドおよびページの再読み込みのためにwebpack-dev-server構成に反応させる方法

私の意図は、そのようなディレクトリ構造を持つことです。

- /my-project/
  -- /src/ (here are all .tsx files located)
  -- /dist/
     - index.html
     - /build/
        -bundle.js

 -- /node_modules/
 -- package.json
 -- tsconfig.json
 -- webpack.config.js

したがって、/ distサブディレクトリに手動で作成されたindex.htmlを作成し、その中にwebpackによって作成されたapp.jsが配置される/ buildサブディレクトリを作成します。

また、/ srcディレクトリにある.tsxファイルを保存するときに、webpackがapp.jsを自動的に再構築し、webpack-dev-serverが変更を自動的に反映するようにします。

ぼくの package.jsonは次のようになります：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My first React App",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
    "build": "webpack --config webpack.config.js --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "AndreyKo",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^0.14.54",
    "@types/react-dom": "^0.14.19",
    "jquery": "^3.1.1",
    "source-map-loader": "^0.1.5",
    "ts-loader": "^1.3.0",
    "TypeScript": "^2.1.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}

ぼくの webpack.config.js：

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "app.js",
        publicPath: "/dist/",
        path: "./dist/build/"
    },
    dev_tool: "source-map",
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            {test: /\.tsx?$/, loader: 'ts-loader'}
        ],
        preloaders: [
            {test: /\.js$/, loader: 'source-map-loader'}
        ]
    }
}

ぼくの index.html：

<!DOCTYPE html>
<html>
    <body>
        <div id="app-container"></div>
    </body>
    <script src="./build/app.js"></script>
</html>

と私 index.tsxファイルは次のようになります：

import * as jQuery from 'jquery';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function appOutput() {
    ReactDOM.render(<div>Hello, we are talking from React!</div>, document.getElementById("app-container"));
}
appOutput();

ターミナルにコマンドを実行しました：

npm run build
npm run start

そのため、app.jsが作成され、webpack-dev-serverが動作を開始し、ブラウザーでページを開きました。すべてがはるかにうまくいきます。しかし、index.tsxのテキストを変更してこのファイルを保存しても何も変更されないので、ブラウザーページを更新しようとしましたが、テキストは同じままで、app.jsは再構築されません。テキストを変更するには、「npm run build」を発行して、ターミナルから手動でwebpackを使用してapp.jsを再構築する必要があります。

ワークフローを改善して、/ srcフォルダーの変更を、手動で再構築せずにdist/build/app.jsファイルに自動的に反映させるにはどうすればよいですか？

javascriptreactjstypescriptwebpackwebpack-dev-server
8
AndreyKo

ここでは、react-webpack-TypeScript開発用の開発環境の構成に遭遇する可能性のある人のために、より完全で（より重要なことは）より正しい答えを示します。どういうわけか、ドキュメントを読むことは私にとって十分ではなく、それを機能させるために1日以上を費やさなければなりませんでした。

そこで、バンドルされたjavascriptファイルがhtmlindex.htmlファイルよりも1レベル深いディレクトリ構造を取得したかったのです。完全なディレクトリ構造については、最初の投稿を参照してください。

また、開発者として、/ srcフォルダー内の.tsxファイルを変更すると、その変更がブラウザーに反映され、バンドルされている.jsファイルを再コンパイルする必要があります。これらの目的のために、プロジェクトのpackage.jsonファイルのscriptsブロックに2つのスクリプトが作成されます。

  "scripts": {
    "start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
    "build": "webpack --config webpack.config.js --watch",
  }

1つ目は、webpack-dev-serverを起動して、提供するルートディレクトリ/ distと、ブラウザページを自動的に再読み込みして不要なiframeを削除するための--hot--inlineキーを提供します。 webpack-dev-serverの起動時に、-portdefinedとautopage--openもあります。

2番目のコマンドは、-watchキーを使用して、バンドルされたapp.jsをwebpackで自動再構築するためのものです。

また、これらのコマンドが期待どおりに機能するには、webpackがwebpack.config.jsで適切に構成されている必要があります。そして、私にとって（そして後で見たように他の多くの人にとって）最もデリケートな部分は、出力ブロックの正しいパス、publicPath、およびファイル名の設定でした。 publicPathの最初の投稿に誤りがあり、webpack-dev-serverが機能しませんでした。

出力ブロックが機能していませんでした：

output: {
    filename: "app.js",
    publicPath: "/dist/",
    path: "./dist/build/"
}

動作する出力ブロックは次のとおりです。

output: {
    filename: "app.js",
    publicPath: "/build/",
    path: "./dist/build/"
}

publicPathプロパティは、ブラウザページを更新するためにwebpack-dev-serverによって使用され、コンパイルされた.jsファイルが存在するディレクトリに設定する必要があります。ルートサーバーディレクトリは、私の開始時に--content-baseキーで設定されます。スクリプトであり、プロジェクト内の./distを参照します。したがって、正しい値は/ build /であり、/ dist /ではありません。

パスとファイル名のプロパティは、バンドルされた.jsファイルを配置する場所と名前を付ける方法をwebpackとコマンドで使用します。私の場合、。/ dist/build /app.jsファイルが作成されます。

確かにドキュメントに存在するもう1つのことは、ここで強調したいのは、startスクリプトでwebpack-dev-serverを起動した後、ビルドコマンドを実行していないときに.tsxファイルを保存するときです（ webpack watchの変更）ブラウザーで更新された結果を取得しますが、バンドルされているapp.jsファイルは変更されません。これは、webpack-dev-serverがバンドルされた.jsファイルのメモリ内コピーのみを更新し、ファイル自体は更新しないためです。同期するには、webpackを使用してバンドルを再構築する必要があります。

バンドルされた.jsファイルをブラウザページと同期させたい場合は、webpackウォッチを変更し、webpack-dev-serverを使用してページをホットリロードする必要があるため、「start」スクリプトと「build」スクリプトの両方を実行します。しかし、Windows開発マシンで1つのコマンドプロンプトから両方を実行することはできないので、それぞれを別々に実行します。

これはWindowsにのみ有効です！

start npm run start && start npm run build

そして、私の指のために、この行を、プロジェクトフォルダーに配置されているrun.batファイルに配置します。これで、VSCodeエディターでWindowsターミナルを開き、そこでコマンド「run」を発行できます。

今のところ以上です。

9
AndreyKo

さて、完全ではありませんが、問題を解決することができました。

それはOSや他の環境に依存しているように見えるので、正確に言いたいのは、私のOS-windows7私のエディター-VSCodeです。

まず最初に、私のインストールは調整なしで必要に応じて機能することに注意したいと思います。

しかし、VSCodeターミナルからビルドコマンドとスタートコマンドを実行すると機能しません。

これを機能させるには、2つの別々のターミナルウィンドウを開く必要があり、最初のウィンドウでビルドスクリプトを実行し、2番目のウィンドウで開始スクリプトを実行します。

first Terminal > npm run build
second Terminal > npm run start

VS Codeの端末からこれを正しく行う別の方法は、次のようなコマンドを発行することです。

start npm run start && start npm run build

これはまったく同じことを行います-2つのターミナルウィンドウを開き、これらのウィンドウでnpmコマンドを実行します。

最後に、この行を配置したrun.batファイルを作成しました。これで、VS Codeとターミナル実行コマンド「run」でプロジェクトを開くことができ、webpackとwebpack-dev-serverが変更の監視を開始します。

それでおしまい。より良い方法があれば、私に指摘してください、私はそれを解決するためのよりエレガントな方法に開かれています。

1
AndreyKo