Question

我正在尝试使用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')
    },

    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;

}

Answer 1

如果您在Webpack 2中使用HTML模板，除了使用文件加载器之外，还需要更改HTML：

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

到这个

<img src=<%=require("../images/foo.png")%> />

Answer 2

是的，您必须这样做才能从不同的路径加载图像。
我有类似的问题，我使用file加载程序解决了这个问题：

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"]
}
]

祝你好运

Answer 3

您可以使用file-loader提取图像。然后，使用html-loader，可以通过查询参数attrs指定该加载程序应处理哪个标签属性组合。

我可以使其在此配置下工作：

{
    test: /\.(jpe?g|png|gif|svg|ico)$/i,
    use: [{
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: 'images/'
        }
    }]
},
{
    test: /\.(html)$/,
    use: {
        loader: 'html-loader',
        options: {
            attrs: ['img:src', 'link:href']
        }
    }
}

或者像这样的角度：

attrs: [':ng-src', ':ng-href']

Answer 4

对于 Webpack 5，你必须这样写：

module: {
  rules: [
    // other stuff above.....
    {
      test: /\.html$/,
      use: [
        {
          loader: 'html-loader'
          options: {
            sources: true,
          }
        }
      ]
    }
  ]
}

Answer 5

使用Webpack 4，我可以通过html-loader更新为文件指定root来解决此问题。因此，鉴于@syko的原始结构；在webpack.config.js中...

module: {
  rules: [
    // other stuff above.....
    {
      test: /\.html$/,
      use: [
        // ...The other file-loader and extract-loader go here.
        {
          loader: 'html-loader'
          options: {
            // THIS will resolve relative URLs to reference from the app/ directory
            root: path.resolve(__dirname, 'app')
          }
        }
      ]
    }
  ]
}

这告诉html-loader解释/app文件夹中的所有绝对网址。因此，在我们的app/templates/foo.html中，您可以使用以下...

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

这然后告诉html-loader将以上内容视为path.resolve(__dirname, 'app', 'images', 'foo.png')。然后，如果您有extract-loader和/或file-loader，则所有路径都应该正确。

设法解决了一段时间后才得到解决方案。最大的困惑是在加载程序堆栈中解释/images/foo.png的地方，在这种情况下，它从html-loader插件开始。之后的所有其他内容，都更多关于如何发布图像文件。

希望有帮助。

Webpack：从html模板加载图像

5 个答案: