html-webpack-Plugin injizieren js nicht in Datei index.html, wenn webpack-dev-Server

Hier verwenden ist mein webpack config:html-webpack-Plugin injizieren js nicht in Datei index.html, wenn webpack-dev-Server

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' 
};

Und in package.json:

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

Wenn Ich starte npm start, in localhost wird die js-Datei nicht in index.html injiziert. Wenn ich webpack oder npm run build starte, wird die js-Datei erfolgreich injiziert. Can html-webpack-plugin auch js-Datei in index.html injizieren, wenn ich in localhost bin?

Quelle

2016-09-20 Xiangyu Zhang

Sie können Config wie diese versuchen ..

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

und 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>

Sie installieren müssen npm i -D html-webpack-plugin vue-loader vue-html-loader

aber Ich empfehle Ihnen, ein Projekt aus Vorlage erstellen vue init webpack

Diese Vorlage, die html-webpack-Plugin

Quelle

2016-09-20 21:14:22 ridermansb

Dieses Problem speziell auf die Tatsache, verwenden, dass die webpack-Entwicklung-Server nicht die Möglichkeit, Dateien auf dem lokalen Dateisystem zu schreiben hat und stattdessen schreibt seine Dateien zu MEMORY Nur.

Aus diesem Grunde Sie in der Lage waren, um richtig zu generieren Dateien wth Html-Webpack-Plugin, wenn Sie den Standard-webpack Build-Befehl (NICHT die WDS/Webpack-Entwicklung-Server) mit ausführen:

webpack

Alternativ, da Sie wurden mit vue.js Webpack-einfaches Projekt (https://github.com/vuejs-templates/webpack-simple/tree/master/template) waren Sie auch die NPM-Skripte verwenden können, die mit dem vue.js Probe kommen (im Inneren des package.json) über:

npm run build

In beiden Fällen werden die Dateien so in das Verzeichnis geschrieben, wie Sie es sich nach dem Erstellen mit webpack denken sollten. Das Schreiben des Dateisystems, wo beim Webpack-Development-Server keine Dateien geschrieben wurden (funktioniert auch nicht, weil WDS schreibt in den Speicher und nicht in das lokale Dateisystem).

ich auf diese Antwort stolperte, wenn sie auf dem gleichen Problem dank Ihren Kommentar arbeiten.

„Wenn ich webpack oder npm Lauf Build ausführen, wird die js Datei erfolgreich injiziert kann auch HTML-webpack-Plugin injizieren js-datei in index.html wenn ich in localhost bin?"

Fazit: Html-Webpack-Plugin WILL NOT Write-Dateien in dem lokalen Dateisystem, wenn es als Teil des Webpack-Entwicklung-Servers (WDS), obwohl Html-Webpack verwendet wird -Plugin WILL write-Dateien (mit einer identischen webpack Konfiguration), wenn der normalen webpack Build-Prozess (kein WDS) verwenden.

Quelle

2017-01-03 20:33:50 Necevil

würde https://github.com/jantimon/html-webpack-harddisk-plugin Hilfe ? – jantimon

Dank @jantimon mein Anwendungsfall ist ziemlich spezialisiert, da ich alles innerhalb von Docker-Containern (Webpack usw. etc) laufen lasse verwende Webpack, um mein Vuejs-Projekt zu erstellen, ohne Knoten usw. in meiner lokalen Umgebung installieren zu müssen. Ich habe das Plugin nicht getestet, da mein Problem im Allgemeinen eine konzeptionelle Frage war, was ich von WDS usw. erwartet hatte. – Necevil

html-webpack-Plugin injizieren js nicht in Datei index.html, wenn webpack-dev-Server

Antwort

Verwandte Themen