I am using a webpack-dev server with this configuration:
import webpack from 'webpack'; import autoprefixer from 'autoprefixer'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import HtmlWebpackPlugin from 'html-webpack-plugin'; const exports = { devtool: 'cheap-module-source-map', entry: { bundle: `${__dirname}/src/main.ejs`, commons: [ 'lodash', 'webpack-dev-server/client?http://localhost:8090', 'webpack/hot/only-dev-server' ] }, module: { rules: [ { test: /\.(js)?$/, include: `${__dirname}/src`, loader: 'babel-loader' }, { test: /\.(scss|css)$/, include: [ `${__dirname}/src` ], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader'] }) }, { test: /\.(ejs)$/, include: `${__dirname}/src`, use: 'ejs-render-loader' }, { test: /\.(png|jpg|gif)$/, include: [ `${__dirname}/src` ], loader: 'file-loader' }, { test: /\.svg/, include: [ `${__dirname}/src` ], loader: 'file-loader?mimetype=image/svg+xml' }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, include: [ `${__dirname}/src` ], loader: 'file-loader?mimetype=application/font-woff' }, { test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, include: [ `${__dirname}/src` ], loader: 'file-loader' } ] }, resolve: { extensions: ['.js', '.ejs', '.scss'] }, output: { path: `${__dirname}/dist`, filename: 'bundle.js' }, devServer: { contentBase: `${__dirname}/dist`, publicPath: 'http://localhost:8090', hot: true, historyApiFallback: true, host: 'localhost', port: 8090, inline: true }, plugins: [ new ExtractTextPlugin('styles.css'), new webpack.optimize.CommonsChunkPlugin({ name: 'commons', filename: 'commons.js', minChunks: Infinity }), new CaseSensitivePathsPlugin(), new webpack.LoaderOptionsPlugin({ options: { postcss: [autoprefixer({ browsers: [ 'last 2 Chrome versions', 'last 2 Firefox versions', 'last 2 edge versions', 'IE >= 9', 'Safari >= 7', 'iOS >= 7' ] })] } }), new HtmlWebpackPlugin({ filename: 'index.html', hash: true, template: 'src/main.ejs' }) ] }; module.exports = exports;
and my main.ejs file looks like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css" /> <title>Webpack App</title> </head> <body> <div id="app"> <% include components/navigation/navigation.ejs %> </div> </body> </html>
The fact is that the webpack-dev server is not restored when any of my other .ejs files .ejs (for example, components/navigation/navigation.ejs , which I included in main.ejs ), it is restored only when I apply any change to the main.ejs file. I searched the web to find a solution, but without any success.