Webpack:从 html 模板加载图像 [英] Webpack: Loading images from html templates
问题描述
我正在尝试使用 Webpack 设置一个 angular 项目,但我不知道如何从 html 模板中引用图像并将它们包含在构建中.
我的项目树如下:
package.json应用程序/- 图片/- foo.png- 脚本/- 样式/- 模板/
我正在尝试将 html-loader
与 url-loader
和 file-loader
一起使用,但它没有发生.>
这是一个示例模板:app/templates/foo.html
问题 #1:我希望能够引用与 app/
相关的图像.现在,路径需要相对于模板文件,这会很快变得丑陋(../../../images/foo.png
).
问题#2:即使我指定了相对路径,就像我上面所做的那样,项目构建成功,但实际上什么也没发生.路径保持原样,dist/
中没有图像.
这是我的 webpack 配置:
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 = 函数(配置,环境){var appRoot = path.join(__dirname, 'app/')if(!env) env = '发展';var webpackConfig = {缓存:真实,调试:真的,内容基础:appRoot,入口: {应用程序:path.join(appRoot, '/scripts/app.coffee')},输出: {路径:path.join(__dirname, 'dist/),公共路径:'/',图书馆目标:'var',文件名:'脚本/[名称].[哈希].js',chunkFilename: '[name].[chunkhash].js'},模块: {装载机: [{测试:/\.css$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader")},{测试:/\.scss$/,loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?outputStyle=expanded&includePaths[]=./node_modules/foundation/scss/')},{测试:/\.coffee$/,装载机:'咖啡装载机'},{加载器:'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'},{测试:/\.png$/,加载器:url-loader?limit=100000&mimetype=image/png&name=[path][name].[hash].[ext]"},{测试:/\.jpg$/,加载器:file-loader?name=[path][name].[hash].[ext]"},{测试:/\.(woff|woff2)(\?(.*))?$/,加载器:'url?prefix=factorynts/&limit=5000&mimetype=application/font-woff'},{测试:/\.ttf(\?(.*))?$/,加载器:'文件?前缀=字体/'},{测试:/\.eot(\?(.*))?$/,加载器:'文件?前缀=字体/'},{测试:/\.svg(\?(.*))?$/,加载器:'文件?前缀=字体/'},{测试:/\.json$/,加载器:'json'}]},解决: {扩展名: ['','.js','.咖啡','.scss','.css'],根:[appRoot],},单运行:真,插件: [新的 webpack.ContextReplacementPlugin(/.*$/,/a^/),新的 webpack.ProvidePlugin({'_': 'lodash'}),new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),新的 HtmlWebpackPlugin({模板:appRoot + '/app.html',文件名:'app.html',注入:'身体',块:['应用程序']})],开发工具:'评估'}如果(环境 === '生产'){webpackConfig.plugins = webpackConfig.plugins.concat(新的 ngAnnotatePlugin(),新的 webpack.optimize.UglifyJsPlugin(),新的 webpack.DefinePlugin({'过程环境':{'NODE_ENV': JSON.stringify('production')}}),新的 webpack.optimize.DedupePlugin(),新的 webpack.optimize.UglifyJsPlugin());webpackConfig.devtool = false;webpackConfig.debug = false;}返回 webpackConfig;
}
- 是的,您必须这样做才能从不同路径加载图像.
- 我遇到了类似的问题,我使用
file
加载器解决了这个问题:
.
加载器:[{//JS加载器测试:/\.js$/,loader: 'babel-loader?optional[]=runtime',排除:/node_modules/}, {//资产加载器测试:/\.(woff|woff2|ttf|eot)$/,加载器:'文件加载器'},{//图像加载器测试:/\.(jpe?g|png|gif|svg)$/i,加载器:'文件加载器'},{//HTML加载器测试:/\.html$/,装载机:'html-装载机'},{//SCSS加载器测试:/\.scss$/,加载器:["style-loader", "css-loader", "sass-loader?indentedSyntax"]}]
祝你好运
I'm trying to set up an angular project using Webpack but I can't figure out how to reference images from within html templates and have them included in the build.
My project tree is as follows:
package.json
app/
- images/
- foo.png
- scripts/
- styles/
- templates/
I'm trying to use html-loader
along with url-loader
and file-loader
but it's just not happening.
This is an example template: app/templates/foo.html
<img src="../images/foo.png" />
Problem #1: I would like to be able to reference images relative to app/
. Right now, the paths need to be relative to the template file and this will get ugly very quickly (../../../images/foo.png
).
Problem #2: Even if I specify the relative path, as I have done above, the project builds successfully but nothing really happens. The paths are left as-is and no images appear in dist/
.
Here is my 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;
}
- Yes, you will have to do so for loading images from different path.
- I had similar issue and I resolved this using
file
loader:
.
loaders: [{
// JS LOADER
test: /\.js$/,
loader: 'babel-loader?optional[]=runtime',
exclude: /node_modules/
}, {
// ASSET LOADER
test: /\.(woff|woff2|ttf|eot)$/,
loader: 'file-loader'
},
{
//IMAGE LOADER
test: /\.(jpe?g|png|gif|svg)$/i,
loader:'file-loader'
},
{
// HTML LOADER
test: /\.html$/,
loader: 'html-loader'
},
{
//SCSS LOADER
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader?indentedSyntax"]
}
]
Good Luck
这篇关于Webpack:从 html 模板加载图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!