Webpack: Chargement des images à partir de modèles html
Je suis en train de configurer un angulaire du projet à l'aide de Webpack mais je ne peux pas comprendre comment le faire référence à des images de l'intérieur des modèles html et les ont inclus dans la compilation.
Mon arborescence du projet est comme suit:
package.json
app/
- images/
- foo.png
- scripts/
- styles/
- templates/
Je suis en train d'utiliser html-loader
avec url-loader
et file-loader
mais c'est juste pas se produire.
Ceci est un exemple de modèle: app/templates/foo.html
<img src="../images/foo.png" />
Le problème n ° 1: je voudrais être en mesure de faire référence à des images par rapport à app/
. Maintenant, les chemins sont relatifs au fichier de modèle et cela va devenir moche très rapidement (../../../images/foo.png
).
Problème #2: Même si je spécifie le chemin d'accès relatif, comme je l'ai fait ci-dessus, le projet est construit avec succès, mais rien ne se passe vraiment. Les chemins sont de gauche et qu'aucune image n'apparaît dans dist/
.
Voici mon webpack config:
var path = require('path');
var webpack = require('webpack');
var ngminPlugin = require('ngmin-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
module.exports = function(config, env) {
var appRoot = path.join(__dirname, 'app/')
if(!env) env = 'development';
var webpackConfig = {
cache: true,
debug: true,
contentBase: appRoot,
entry: {
app: path.join(appRoot, '/scripts/app.coffee')
},
output: {
path: path.join(__dirname, 'dist/),
publicPath: '/',
libraryTarget: 'var',
filename: 'scripts/[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?outputStyle=expanded&includePaths[]=./node_modules/foundation/scss/')
},
{
test: /\.coffee$/,
loader: 'coffee-loader'
},
{
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'
},
{
test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png&name=[path][name].[hash].[ext]"
},
{
test: /\.jpg$/, loader: "file-loader?name=[path][name].[hash].[ext]"
},
{
test: /\.(woff|woff2)(\?(.*))?$/,
loader: 'url?prefix=factorynts/&limit=5000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.eot(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.svg(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
extensions: [
'',
'.js',
'.coffee',
'.scss',
'.css'
],
root: [appRoot],
},
singleRun: true,
plugins: [
new webpack.ContextReplacementPlugin(/.*$/, /a^/),
new webpack.ProvidePlugin({
'_': 'lodash'
}),
new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
new HtmlWebpackPlugin({
template: appRoot + '/app.html',
filename: 'app.html',
inject: 'body',
chunks: ['app']
})
],
devtool: 'eval'
}
if(env === 'production') {
webpackConfig.plugins = webpackConfig.plugins.concat(
new ngAnnotatePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.DefinePlugin({
'process-env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
);
webpackConfig.devtool = false;
webpackConfig.debug = false;
}
return webpackConfig;
}
- Comment avez-vous résoudre le problème n ° 1?
Vous devez vous connecter pour publier un commentaire.
file
chargeur:.
Bonne Chance
file-loader
d'options qui vous permettent de simple en html des fichiers de référence d'un point de référence commun (même @syko dossier app est un début), donc on pourrait faire<img src="./images/foo.png">
, depuis la structure de répertoire d'images est moins susceptible de modifier de nombreux fichiers de modèle. Luis de la réponse ci-dessous est la plus correcte, car le module d'aliasing peut également être utilisé, mais en ajoutant dans le besoin semble laid et pas très intuitive.<img src="./images/foo.png">
avec "fichier" -chargeur, vous pouvez importer l'image à partir de votre .fichier js et l'ajouter à votre modèle via raw du code javascript.Si vous êtes à l'aide de modèles HTML de Webpack 2, en plus d'utiliser le fichier-chargeur, vous devez changer dans votre code HTML:
<img src="../images/foo.png" />
à ce
<img src=<%=require("../images/foo.png")%> />
Vous pouvez utiliser fichier-chargeur à extraire des images. Ensuite, à l'aide de html-chargeur vous pouvez spécifier la balise attribut doit être traitée par ce chargeur via le paramètre de requête
attrs
.J'ai pu le faire fonctionner avec cette configuration:
Ou angulaire quelque chose comme ceci:
Avec Webpack 4, j'ai été en mesure de résoudre ce problème en mettant à jour par
html-loader
pour spécifier leroot
pour mes fichiers. Donc, compte tenu @syko de la structure d'origine; danswebpack.config.js
...Ceci dit l'
html-loader
à l'interprétation de tous les absolue url de la/app
dossier. Donc, dans notreapp/templates/foo.html
, vous pouvez ensuite utiliser la suite...Ce dit alors
html-loader
voir ci-dessus commepath.resolve(__dirname, 'app', 'images', 'foo.png')
. Alors si vous avezextract-loader
et/oufile-loader
, tous les chemins d'accès doivent être correctes.Réussi à obtenir cette solution après marteler pendant un certain temps. La plus grande confusion est là que au sujet dans le chargeur de pile de la
/images/foo.png
est interprété, dans ce cas, il commence à lahtml-loader
plugin. Tout le reste après, c'est plus sur la façon dont les fichiers image doivent être publiées.Espère que ça aide.