Javascript-форум (https://javascript.ru/forum/)
-   Сборка проекта, утилиты (https://javascript.ru/forum/server-tools/)
-   -   webpack 1.12.13 ругается Cannot resolve 'file' or 'directory' ./img/readme2.png (https://javascript.ru/forum/server-tools/67292-webpack-1-12-13-rugaetsya-cannot-resolve-%27file%27-%27directory%27-img-readme2-png.html)

alexandr2006 08.02.2017 18:08

webpack 1.12.13 ругается Cannot resolve 'file' or 'directory' ./img/readme2.png
 
При сборке webpack 1.12.13 ругается на подключенные в css картинки и шрифты, например:

Cannot resolve 'file' or 'directory' ./img/readme2.png


var path = require('path')
var webpack = require('webpack')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new NpmInstallPlugin(),
    new ExtractTextPlugin('bundle.css')
  ],
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loaders: ['eslint'],
        include: [
          path.resolve(__dirname, "src"),
        ],
      }
    ],
    loaders: [
      {
        loaders: ['react-hot', 'babel-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
        test: /\.js$/,
        plugins: ['transform-runtime'],
      },
      {
        test:   /\.css$/,
        //loader: "style-loader!css-loader!postcss-loader"
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader')
      },
      { 
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, 
            include: /\/node_modules\//,
            loader: "file?name=[1].[ext]&regExp=node_modules/(.*)"
      },
      { 
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, 
            exclude: /\/node_modules\//,
            loader: "file?name=[path][name].[ext]"
      }
    ]
  },
  postcss: function () {
    return [autoprefixer, precss];
  }
}


Структура папок
node_modules
src
 |--styles
      |--oil.css
 |--img
      |--картинки
webpack.config.js


Картинки в css подключались так ../img/bla-bla.jpg

Почитал, оказывается в ноде все не так нак надо и надо ~ писать.

Переделал, стало '~/src/img/bla-bla.jpg' Теперь при компиляции webpack не ругается, но в консоли браузера ошибка: Cannot GET /src/img/bla-bla.jpg

Помогите побороть webpack

Coriolan161 09.02.2017 12:20

alexandr2006,
разве дело не в publicPath?

alexandr2006 09.02.2017 13:37

Цитата:

Сообщение от Coriolan161 (Сообщение 443761)
alexandr2006,
разве дело не в publicPath?

Я не знаю. А что с ней не так?

Coriolan161 09.02.2017 15:08

alexandr2006,
Вперед
https://github.com/webpack/docs/wiki...tputpublicpath

alexandr2006 11.02.2017 22:09

Цитата:

Сообщение от Coriolan161 (Сообщение 443784)

Почитал на хабре https://habrahabr.ru/company/plarium/blog/309230/ - по идее должно работать


Установил https://www.npmjs.com/package/file-loader,

добавил var url = require("file-loader");

поменял строку на loader: "file-loader?name=[path][name].[ext]"

Все равно почему-то не работает((


Часовой пояс GMT +3, время: 04:22.