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?

Necevil · Accepted Answer · 2017-01-03 20:33:50Z

7

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).

answered Jan 3, 2017 at 20:33

Necevil

2,9626 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Necevil Over a year ago

Thanks @jantimon my use case is pretty specialized since I am running everything inside of docker containers (webpack etc etc). I am using webpack to build my Vuejs project without having to install node etc on my local environment. I didn't try the plugin as my issue ended up generally being a conceptual issue of what I expected from WDS etc.

Ahmad Dehnavi · Accepted Answer · 2019-04-20 05:38:12Z

0

I have same problem and below config work for me.

I used to have absolute path and when change it to relative, it work.

new HtmlWebpackPlugin({
        inject: true,
        template:'public/index.html', // relative to project root 
        filename:'index.html'         // relative to build folder
    })

answered Apr 20, 2019 at 5:38

Ahmad Dehnavi

1,5531 gold badge17 silver badges21 bronze badges

Comments

ridermansb · Accepted Answer · 2016-09-20 21:14:22Z

-1

You can try config like this..

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })

and Index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>My App</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

You will need install npm i -D html-webpack-plugin vue-loader vue-html-loader

but I recommend you create a project from template, vue init webpack

This template use the html-webpack-plugin

answered Sep 20, 2016 at 21:14

ridermansb

11.1k28 gold badges122 silver badges232 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related