A
A
Alesck2017-01-10 00:31:00
Node.js
Alesck, 2017-01-10 00:31:00

How to compile Jade img src resolve url when building Webpack?

Can't resolve inline image conflict img src
doesn't pick up path, uses Jade templating engine
and background images work well.
Screenshot:
prntscr.com/dtk7hv
C Webpack started to understand recently, I can not solve this problem for the second day.
Project sources:
https://yadi.sk/d/CPV_9ST2vuNus
I would be grateful for any help.
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;

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question