0
Je suis très nouveau pour webpack et étoffes, je besoin d'une solution à base de séparer href de index.html et src pour bundle.js, pour le développement et la production que les deux sont différents.En utilisant Webpack HtmlWebpackPlugin
pour le développement
base de href = localhost
src = /bundle.js
Pour la production
de base href = serveur u rl
src = /dist/bundle.js
Pour résoudre le problème ci-dessus, je suis en train d'utiliser HtmlWebpackPlugin, suivant est le webpack.config.js réglage
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname + "/dist",
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
exclude: /node_modules/,
use:[
{
loader: 'babel-loader',
options:{
presets: ['react', 'es2015', 'stage-1']
}
},
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new HtmlWebpackPlugin({
template:'index.html',
inject:'head',
hash: true,
baseHref: 'http://localhost:8030/'
})
]
};
et suivant est la façon dont j'essaie d'utiliser baseHref en index.html
<html>
<head>
<% if (htmlWebpackPlugin.options.baseHref) { %>
<base href="<%= htmlWebpackPlugin.options.baseHref %>">
<% } %>
/*
Several css are defined with relative path here
*/
</head>
<body>
<div class="container-fluid"></div>
</body>
<script src="/bundle.js"></script>
</html>
Je reçois l'erreur suivante en utilisant les paramètres ci-dessus
je besoin d'aide pour savoir ce que je fais mal ici?
Toute aide serait grandement appréciée.
Merci.
Est-ce que 'html-loader' est installé? –
Non, il n'est pas installé, cela fait-il une différence @Prakashsharma? – iphonic
Je dirais plutôt utiliser le modèle 'ejs'. Vous n'avez pas besoin de chargeur pour cela. https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md –