Webpack：从html模板加载图片 [英] Webpack: Loading images from html templates

问题描述

我正在尝试使用Webpack设置一个角度项目，但我无法弄清楚如何从html模板中引用图像并将它们包含在构建中。

我的项目树如下：

  package.json 
 app / 
  -  images / 
  -  foo.png 
  -  scripts / 
  -  styles / 
  -  templates / 
  

我试图使用 html-loader 以及 url-loader 和 file-loader 但它没有发生。

这是一个示例模板： app / templates / foo.html

 < img src =../ images / foo.png /> 
  

问题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 = 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'）
}，
 
输出：{
 path：path.join（__ dirname，'dist /），
 publicPath： '/'，
 libraryTarget：'var'，
 filename：'scripts / [name]。[hash] .js'，
 chunkFilename：'[name]。[chunkhash] .js '
}，
 
模块：{
加载器：[
 {
 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'
} 
] 
}，
 
解析：{
 extensions：[
''，
'.js'，
'.coffee'，
'.scss'，
'.css'
]，
 root：[appRoot]，
}，
 
 singleRun：true，
插件：[
新的webpack.ContextReplacementPlugin（/.*$/，/ a ^ /），
新的webpack.ProvidePlugin（{
'_'：'lodash'
}），
新的ExtractTextPlugin（styles / [name]。[chunkhash] .css，{allChunks：true}），
 new HtmlWebpackPlugin（{
 template：appRoot +'/app.html'，
文件名：'app.html'，
注入：'body'，
 chunks：['app'] 
}）
]，
 devtool：'eval '
} 
 
 if（env ==='production'）{
 webpackConfig.plugins = webpackConfig.plugins。 concat（
 new ngAnnotatePlugin（），
新的webpack.optimize.UglifyJsPlugin（），
新的webpack.DefinePlugin（{$ b $'process-env'：{
' NODE_ENV'：JSON.stringify（'production'）
} 
}），
新的webpack.optimize.DedupePlugin（），
新的webpack.optimize.UglifyJsPlugin（）
）; 
 webpackConfig.devtool = false; 
 webpackConfig.debug = false; 
} 
返回webpackConfig; 
  

}

解决方案 div>

1. 是的，您必须这样做才能加载来自不同路径的图片。 我有类似的问题，我使用<$ c
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   $ b pre> loaders：[{
// JS LOADER
test：/\.js$/，
loader：'babel-loader？optional [ ] = runtime'，
exclude：/ node_modules /
}，{
// ASSET LOADER
test：/\((officewoff2|ttf|eot)$/ ，
loader：'file-loader'
}，
{
//图片加载器
test：/ \。（jpe？g | png | gif | svg）$ / i，
loader：'file-loader'
}，
{
// HTML LOADER
test：/\.html$/，
loader：'html-loader'
}，
{
// SCSS LOADER
test：/\.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;
   

   }

   解决方案

   1. Yes, you will have to do so for loading images from different path.
   2. 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屋！