hot reloading in lay

9 years ago · 1fa61d10a8
4 changed files with 44 additions and 3 deletions
--- a/lay/bin/server.js
+++ b/lay/bin/server.js
@ -6,11 +6,13 @@ const compiler = Webpack(webpack_config);

 const server = new WebpackDevServer(compiler, {
    contentBase: webpack_config.output.path,
+    publicPath: webpack_config.output.publicPath,
    disableHostCheck: true,
    stats: {
        colors: true
    },
-    headers: {}
+    headers: {},
+    hot: true,
 });

 const listen_interface = "0.0.0.0";
--- a/lay/package.json
+++ b/lay/package.json
@ -29,11 +29,31 @@
    "devDependencies": {
        "babel-core": "^6.24.1",
        "babel-loader": "^7.0.0",
+        "babel-preset-env": "^1.5.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.2",
+        "react-hot-loader": "^3.0.0-beta.7",
        "style-loader": "^0.18.1",
        "webpack": "^2.6.0",
        "webpack-dev-server": "^2.4.5"
+    },
+    "babel": {
+        "presets": [
+            [
+                "env",
+                {
+                    "targets": {
+                        "chrome": 52,
+                        "firefox": 53
+                    },
+                    "modules": false
+                }
+            ],
+            "react"
+        ],
+        "plugins": [
+            "react-hot-loader/babel"
+        ]
    }
 }
--- a/lay/web/index.html
+++ b/lay/web/index.html
@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="lay"></div>
-    <script src="js/index.js"></script>
+    <script src="public/js/index.js"></script>
  </body>
 </html>
--- a/lay/webpack.config.js
+++ b/lay/webpack.config.js
@ -1,15 +1,34 @@
+const webpack = require('webpack');
 const path = require('path');

 module.exports = {
+    devtool: 'inline-source-map',
    entry: {
        'index': [
+            'react-hot-loader/patch',
+            'webpack-dev-server/client?http://localhost:2000',
+            'webpack/hot/only-dev-server',
            './src',
        ]
    },
    output: {
 	path: path.resolve(__dirname,'web'),
-	publicPath: '/web/',
+	publicPath: '/public/',
 	filename: 'js/[name].js'
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NamedModulesPlugin()
+    ],
+    module: {
+        rules: [
+            { test: /\.jsx?$/, use: [ 'babel-loader', ], exclude: /node_modules/ },
+            { test: /\.css$/,  use: [ 'style-loader', 'css-loader?modules', ], },
+        ],
+    },
+    resolve: {
+        extensions: [".js","jsx",".json"],
+        mainFiles: ["index"]
    }
 }