html-webpack-plugin nicht Spritzen js-Datei in index.html bei der Verwendung von webpack-dev-server
Hier ist mein 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'
};
Und im Paket.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline",
"build": "webpack --config webpack.config.prod.js"
},
Wenn ich laufen npm starten, localhost der js-Datei wird nicht injiziert, die in index.html
.
Wenn ich laufen webpack oder npm run bauen, die js-Datei injiziert, erfolgreich.
Kann html-webpack-plugin
auch Spritzen js-Datei in index.html
wenn ich in localhost?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dieses Problem bezieht sich speziell auf die Tatsache, dass die webpack-Entwicklung-server verfügt nicht über die Fähigkeit zu schreiben, Dateien in Ihrem lokalen Dateisystem und stattdessen schreibt seine Dateien zu SPEICHER Nur.
Dies ist der Grund, warum Sie waren in der Lage, richtig zu generieren Dateien mit Html-Webpack-Plugin, wenn Sie ausführen, die Standard-webpack Befehl build (NICHT die WDS /Webpack-Entwicklung-Server) mit:
Abwechselnd da waren Sie mit vue.js Webpack-einfaches Projekt (https://github.com/vuejs-templates/webpack-simple/tree/master/template) wurden Sie auch in der Lage, verwenden Sie die npm-Skripte, die mit dem Vue.js Beispiel (befindet sich im inneren des Pakets.json) über:
In beiden Fällen WERDEN die Dateien in das Verzeichnis geschrieben, als Sie gedacht hätte, dass Sie sein sollten, da der Bau mit webpack KANN die Datei schreiben system, wo, wie wurden keine Dateien geschrieben werden, wenn mit Webpack-Entwicklung-Server (erneut das funktioniert nicht, denn WDS schreibt in den Speicher und nicht die lokale Datei-system).
Stieß ich auf diese Antwort beim arbeiten auf das gleiche problem vielen Dank zu deinem Kommentar:
Zusammenfassend:
Html-Webpack-Plugin NICHT schreiben von Dateien auf das lokale Dateisystem, wenn es verwendet wird, als ein Teil der Webpack-Entwicklung-Server (WDS), obwohl Html-Webpack-Plugin WIRD schreiben von Dateien (mit einem identischen webpack-Konfiguration), wenn Sie die normalen webpack build-Prozess (kein WDS).
Können Sie versuchen config wie diese..
und Index.html
Müssen Sie installieren
npm i -D html-webpack-plugin vue-loader vue-html-loader
aber ich empfehle Ihnen, erstellen Sie ein Projekt aus einer Vorlage,
vue init webpack
Ich habe dasselbe problem und unter config für mich arbeiten.
Früher habe ich den absoluten Pfad und ändern, wenn es um relative, es funktioniert.