It looks like I am missing settings for uploading images to the webpack configuration if the image tag is in my index.ejs template.
All my images in my html files in my project are renamed correctly and loaded during my build, but the image tag in the .ejs file is ignored.
ie in my .ejs, if I have <img src="../../home.png"> it remains the same, but in the normal html file it changes to <img src="12345677.png">
My current downloaders:
loaders: [ //HTML Files { test: /\.html$/, loader: 'html' }, //Transpile ES6 to ES5 { test: /\.js$/, include: path.join(__dirname, 'src'), exclude: /node_modules/, loader: 'babel', query: { presets: [ ["es2015", {"module": false}] ] } }, //Extract Normal CSS { test: /\.css$/, loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer', publicPath: "../"}) }, //Bundle Less into CSS Code { test: /\.less$/, loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer!less?sourceMap', publicPath: "../"}) }, //Images { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file' } ]
and important plugins:
plugins.push( new HtmlWebpackPlugin({ hash: true, filename: 'index.html', template: './src/index.ejs', favicon: './src/favicon.ico', inject : false }), // Write out CSS bundle to its own file: new ExtractTextPlugin({ filename: 'css/[contenthash].styles.css', allChunks: true }), );
source share