var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
 entry: './src/app.js',
 output: {
  path: path.resolve(__dirname, './dist/js'),
  filename: 'js/[name].bundle.js'
 },
 module: {
  loaders: [
   
   {
    test: /\.tpl$/,
    loader: 'ejs-loader'
   },
   {
    test: /\.html/,
    loader: 'html-loader'
    
   },
   {
    test: /\.less$/,
    use: [
     'style-loader',
     {
      loader: 'css-loader',
      options: {
       importLoaders: 1
      }
     },
     {
      loader: 'postcss-loader',
      options: {
       plugins: (loader) => [
        require('postcss-import')({root: loader.resourcePath}),
        require('autoprefixer')(), //CSS浏览器兼容
        require('cssnano')()  //压缩css
       ]
      }
     },
     {
      loader: 'less-loader'
     }
    ]
   },
   {
    test: '/\.js$',
    loader: 'babel-loader',
    exclude: path.resolve(__dirname, './node_modules'), //排除那些文件不打包 include 制定打包那些
    query: {
     presets: ['latest']
    }
   },
   {
    test: /\.css$/,
    use: [
     'style-loader',
     {
      loader: 'css-loader',
      options: {importLoaders: 1} //这里可以简单理解为，如果css文件中有import 进来的文件也进行处理
     },
     {
      loader: 'postcss-loader',
      options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
       plugins: (loader) => [
        require('postcss-import')({root: loader.resourcePath}),
        require('autoprefixer')(), //CSS浏览器兼容
        require('cssnano')()  //压缩css
       ]
      }
     }
    ]
   },
   {
    test: /\.(png|jpg|gif|svg)$/i,
    loaders: [
     'url-loader?limit=20000&name=assets/[name]-[hash:5].[ext]',
     'image-webpack-loader'
    ]
    // loader: 'url-loader', //file-loader
    // query: {
    //   limit: 20000,
    //   name: 'assets/[name]-[hash:5].[ext]'
    // }
   }
  ]
 },
 
 plugins: [
  new htmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: 'body'     //将js文件插入body文件内
  }),
 ]
};

<div class="layer">
    <img src="${require('../../assets/bg.jpg')}" alt="">
    <div>this is<%= name %></div>
        <% for (var i = 0; i < arr.length; i++){ %>
        <%= arr[i] %>
        <% } %>
    </div>
    另外看看是不是webpack.config.js配置写错了。

webpack里不用$ require语法了。可以直接img标签就插入的。

看看图片路径是否正确。。