Не удается разрешить конфликт инлайновых изображений img src
не подхватывает путь, используется шаблонизатор Jade
при этом фоновые изображения работают хорошо.
Скрин:
prntscr.com/dtk7hv
C Webpack начал разбираться недавно, эту проблему не могу решить второй день.
Исходники проекта:
https://yadi.sk/d/CPV_9ST2vuNus
Буду благодарен за любую помощь.
Webpack Config
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Path = require( 'path' );
const Autoprefixer = require( 'autoprefixer' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
const Webpack = require( 'webpack' );
const treeify = require('treeify');
const extractCSS = new ExtractTextPlugin('main.css', {
allChunks: true
});
const plugins = [
new HtmlWebpackPlugin({
// где будет index
filename: '../index.html',
// откуда плагин будет брать шаблона индекса
template: 'index.template.html',
// куда вставлять скрипты
inject: 'body'
}),
extractCSS
];
const prod = process.argv[ 4 ] === '--production'; // параметр из командной строки
if( prod )
{
// минифицируем js
plugins.push( new Webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}));
}
// объявляем переменные, которые будут доступны при обработке бандла, но не глобально в объекте window
plugins.push( new Webpack.DefinePlugin({
__PRODUCTION__: prod,
__DEV__: !prod
}));
const config = {
// входная точка для webpack
entry: {
// подключаем последовательно babel и главный файл нашего приложения
app: [ 'babel-polyfill', './client/js/app' ]
},
output: {
// куда сохранять бандл
path: './build',
//publicPath: 'http://localhost:8080/',
// имя сохраняемого файла с шаблонизацией имени в скобках
filename: '[name]-[hash]-bundle.js',
// откуда будет загружать бандл webpack-server
//publicPath: '/'
},
devtool: 'source-map',
module: {
loaders: [{
// файлы должны оканчиваться на .js
test: /\.js$/,
// этот loader будет запускаться только в директории client/js, чтобы минимизировать кол-во запусков loader
include: [
Path.resolve( process.cwd(), 'client/js' )
],
// подключем обработчик для es6
loader: 'babel',
// параметры для обработчика
query: {
presets: [ 'es2015' ]
}
},
// {
// test: /\.svg$/,
// loader: 'svg-inline'
// },
{
test: /\.jade$/,
loaders: ['html-loader','pug-html-loader?exports=false'],
include: [
Path.resolve( process.cwd(), 'client/views' )
]
},
{
test: /\.scss$/,
include: [
Path.resolve( process.cwd(), 'client/style/sass' )
],
loader:extractCSS.extract('style-loader','css?sourceMap!postcss!resolve-url!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true')
},
{
test: /\.(woff|woff2)$/i,
include: [
Path.resolve( process.cwd(), 'client/font' )
],
loader: ['file'],
query: {
name: '[path][name].[ext]?[hash]'
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
include: [
Path.resolve( process.cwd(), 'client/img' )
],
loader: ['file'],
query: {
name: '[path][name].[ext]'
}
}]
},
// imagemin: {
// gifsicle: { interlaced: false },
// jpegtran: {
// progressive: true,
// arithmetic: false
// },
// optipng: { optimizationLevel: 5 },
// pngquant: {
// floyd: 0.5,
// speed: 2
// },
// svgo: {
// plugins: [
// { removeTitle: true },
// { convertPathData: false }
// ]
// }
// },
resolve: {
// для require, какие файлы webpack будет юзать
extension: [ '', '.js' ],
// где расположены наши модули; можно bower подключить
modulesDirectories: [ 'node_modules' ]
},
devServer: {
historyApiFallback: true,
//contentBase : './',
// host:'192.168.0.106',
// port:8080
},
plugins: plugins
};
module.exports = config;