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

问题

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?

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/39585680/html-webpack-plugin-not-inject-js-file-into-index-html-when-using-webpack-dev-se

标签

javascript

Webpack

Vue.js

webpack-dev-server

html-webpack-plugin