html-webpack-plugin not inject js file into index.html when using webpack-dev-server

Question

Here is my webpack config :

var path = require('path');
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var fs = require('fs'),buildPath='./dist/';
var folder_exists = fs.existsSync(buildPath);

if(folder_exists == true)
{
    require('shelljs/global')
    rm('-rf', 'dist')

};

module.exports = {

    entry: './src/main',

    output: {
        path: path.join(__dirname, './dist'),

        filename: '[name].js',

        publicPath: '/dist/'

    },


    devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        grogress: true,
    },
    // "vue-hot-reload-api": "^1.2.2",

    module: {

        loaders: [

            { test: /\.vue$/, loader: 'vue' },

            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },

            { test: /\.css$/, loader: 'style-loader!css-loader'},

        //install css-loader style-loader sass-loader node-sass --save-dev
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},

            { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192&name=images/[name].[ext]'},

            { test: /\.(html|tpl)$/, loader: 'html-loader' },
        ]
    },

    vue: {
        loaders: {
            js:'babel',
            css: 'style-loader!css-loader',
            sass:'style!css!sass?sourceMap'
        }
    },

    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },
    plugins:[
       new HtmlWebpackPlugin({
        template: 'index.html',
        filename: './index.html',
        inject:true
       }),
    ],
    resolve: {

        extensions: ['', '.js', '.vue'],

        alias: {
            filter: path.join(__dirname, './src/filters'),
            components: path.join(__dirname, './src/components')
        }
    },

    devtool: 'eval-source-map'
};

And in package.json:

   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline",
    "build": "webpack --config webpack.config.prod.js"
  },

When I run npm start, in localhost the js file is not injected in index.html. If I run webpack or npm run build, the js file is injected successfully. Can html-webpack-plugin also inject js file into index.html when I'm in localhost?

Answer 1

This issue is related specifically to the fact that the webpack-development-server does not have the ability to write files to your local file system and instead writes its files to MEMORY Only.

This is why you were able to properly generate files wth Html-Webpack-Plugin when you run the default webpack build command (NOT the WDS / Webpack-Development-Server) with:

webpack 

Alternately since you were using vue.js Webpack-simple project (https://github.com/vuejs-templates/webpack-simple/tree/master/template) you were also able to use the npm scripts that come with the Vue.js sample (located inside of your package.json) via:

npm run build

In either case the files ARE written to the directory as you would have thought they should be since Building with webpack CAN write the file system, where as no files were written when using Webpack-Development-Server (again this does not work because WDS writes to memory and not the local file system).

I stumbled onto this answer when working on the same problem thanks to your comment:

"If I run webpack or npm run build, the js file is injected successfully. Can html-webpack-plugin also inject js file into index.html when I'm in localhost?"

To sum up: Html-Webpack-Plugin WILL NOT write files to the local file system when it is used as a part of the Webpack-Development-Server (WDS) even though Html-Webpack-Plugin WILL write files (with an identical webpack configuration) when using the normal webpack build process (no WDS).