@Alesck

Как скомпилировать Jade img src resolve url при сборке Webpack?

Не удается разрешить конфликт инлайновых изображений 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;
  • Вопрос задан
  • 1026 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы