webpackとwebpack-dev-serverをよりよく理解しようとしています。phpサイトのwebpack-dev-serverバンドルへのリンクが正しくありません
私は次のような設定をしています：PHPサイトは反応するアプリケーションを提供しています。このサイトにいる間、開発目的でホットモジュール置き換え（HMR）が必要です。 私は私の全体のページを提供するために私のWebPACK-devのサーバーをしたくないので、私はそれは私がそれから、現時点では手動で私のPHPファイルに含める私bundle.jsを、奉仕持つことを試みた：
<script src="https://localhost:8877/dist/elements.bundle.js"></script>
問題はプロダクションでは、このURLを/dist/elements.bundle.jsのようなものに手作業で変更しなければならないということです。これは、バンドルがサーバー上のdev-serverによって提供されないためです。
私はwebpack-dev-server/client?https://localhost:8877と webpack/hot/only-dev-serverについて多くを読んで、私はcorretlyそれを理解している場合、これらのエントリはWebPACKの-devのサーバーのURLにリダイレクトしますか？
npm start -scriptをwebpack-dev-server --config webpack.dev.jsで実行すると、ファイルシステムにelements.bundle.jsが作成されず、dev-serverのメモリからのみ提供されます。この場合、ローカルのbundle.jsを含めることはできませんが、localhost:8877のものを使用する必要があります。しかし、どうやってwebpackがエントリーポイントをコンパイルし、webpack-dev-serverを1つのコマンドで同時に実行できるのでしょうか？私は2つの端子にwebpack --config webpack.dev.jsとwebpack-dev-server --config webpack.dev.jsを実行した場合
、その後、私は私のPHPファイルで/dist/elements.bundle.jsを含めることができますが、HMRは、それは私に語ったように、ページ全体をリロードする必要があり、もはや機能していません。
私は実際にコンセプトを理解しようとしています。誰かが私に助言を与えてプロジェクトを正しくセットアップすることができれば、とても嬉しく思います。
私のPHPファイルのスクリプトタグを変更せずに、HMRと反応ホットローダーのサポートを使用して、開発と生産を切り替えるにはどうすればよいですか？
これは私のwebpack.dev.jsです：
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const development = process.env.NODE_ENV !== "production";
module.exports = merge(common, {
devtool: 'inline-source-map',
watch: development
});
これは私のwebpack.common.jsです：
const path = require('path');
const webpack = require('webpack');
require("babel-polyfill");
const development = process.env.NODE_ENV !== "production";
module.exports = {
context: path.resolve(__dirname, "webroot"),
devtool: 'cheap-eval-source-map',
entry: {
elements: [
'babel-polyfill',
'react-hot-loader/patch',
'webpack-dev-server/client?https://localhost:8877',
'webpack/hot/only-dev-server',
'./js/elements.client.js'
]
},
output: {
path: path.resolve(__dirname, "webroot", "js", "dist"),
filename: "[name].bundle.js",
publicPath: "https://localhost:8877/dist/"
},
plugins: [
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(development)
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-hot-loader/babel','react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
devServer: {
hot: true,
https: true,
inline: true,
host: 'localhost',
port: 8877,
contentBase: path.resolve(__dirname, "webroot"),
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}
};
に役立ちます願っています。なぜこれが欲しいですか？リロードは開発用ですので、PHPサーバーの回避策は必要ありません（startコマンドは、すでにnodejs httpサーバーを作成しています）。 – Rienk
現在私はルーティングを行い、いくつかのJS変数を提供するPHPフレームワークを使用しているためです。私は単にノードサーバーから提供することはできません –