Lier correctement à bundle webpack-dev-server dans le site php

Question

J'essaie actuellement de mieux comprendre webpack et webpack-dev-server.

J'ai la configuration suivante: Un site php sert une application de réaction et je veux le remplacement de module chaud (HMR) à des fins de développement, tout en étant sur ce site. Parce que je ne veux pas que mon webpack-dev-serveur pour servir ma page entière, j'ai essayé de le faire servir mes bundle.js, que j'INCLUDE, alors dans mon fichier php manuellement au moment:

<script src="https://localhost:8877/dist/elements.bundle.js"></script> 

Le problème est que pour la production, je dois changer cette URL à la main à quelque chose comme /dist/elements.bundle.js, parce que le bundle ne sera pas servi par le dev-server sur le serveur.

Je lis beaucoup sur webpack-dev-server/client?https://localhost:8877 et webpack/hot/only-dev-server et si je l'ai compris corretly, ces entrées seront redirigés vers l'URL serveur webpack-dev?

Si j'exécute mon npm start -script avec webpack-dev-server --config webpack.dev.js, cela ne générera pas mon elements.bundle.js dans le système de fichiers, mais seulement le servir à partir de la mémoire du dev-server. Dans ce cas, je ne peux pas inclure le bundle.js local mais utiliser celui de localhost:8877. Mais comment puis-je faire en sorte que webpack compile le point d'entrée et que webpack-dev-server fasse son travail en même temps avec une seule commande?

Si je cours webpack --config webpack.dev.js et webpack-dev-server --config webpack.dev.js dans deux terminaux, alors je peux inclure /dist/elements.bundle.js dans mon fichier php, mais HMR ne fonctionne plus, car il me dit qu'il doit recharger la page. J'essaye vraiment de comprendre les concepts et je serais très heureux, si quelqu'un pourrait me donner quelques conseils et m'aider à mettre en place mon projet correctement.

Comment puis-je basculer entre le développement et la production sans changer la balise de script dans mon fichier php et avec le support de HMR et de hot-loader?

Ceci est mon 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 
}); 

Ceci est mon 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" 
     } 
    } 
}; 

Answer 1

En fait, ce n'est pas une question de webpack ou webpack-dev-server mais vous php.

J'ai eu le même problème et une configuration similaire. Je me suis retrouvé avec la variable php qui contiendra /dist/bundle.js sur production et http://localhost:3000/bundle.js sur développement.

Le conditionnel était si le site est servi à partir du domaine de production ou non. Ensuite, avec cette variable, vous pouvez concaténer l'emplacement de votre fichier js sur votre modèle de fichier php principal.

<html> 
    <head> ... </head> 
    <body> 
     <script src="<?=$path_to_js?>"></script> 
    </body> 
</html> 

espoir qui aide