Webpack 2: скомпилировать SASS и игнорировать «Модуль не найден: ошибка: не удается разрешить» ./assets/image.png «

Question

Я пытаюсь использовать Webpack вместо Gulp в качестве задачи, в этом случае просто компилируя все файлы SCSS, поскольку я делал это с Compass раньше. Основными задачами являются:

1. запустить Autoprefixer и создать отдельный файл CSS для каждого SCSS, который не является частичным
2. не связывайте изображения или сцепить CSS файлы
3. сохранить URL изображений как, например, background-image: url(assets/image.png)
4. не бросать ошибки, если изображения не могут быть найдены

# 1 решена и работа, однако она перестает работать и выдает ошибку, как только SCSS ссылки на изображения, как в # 3 выше:

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./scss/style.scss 
Module not found: Error: Can't resolve './assets/image.png' in 'C:\Users\robro\projects\...\my-project\dev\styles\scss 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./scss/style.scss 6:15328-15369 
@ ./scss/style.scss 

Я хотел бы «просто» игнорировать эту ошибку и не нужно копировать недостающие файлы на локальный жесткий диск. Это в основном просто я упрямый, думая «Компас не нуждался в этих изображениях, чтобы присутствовать, почему Webpack?»

Вот мои настройки:

---

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

var ExtractCSS = new ExtractTextPlugin('css/[name]'); 

module.exports = { 
    entry: { 
     'style.css': './scss/style.scss', 
     'admin.css': './scss/admin.scss' 
    }, 
    output: { 
     filename: './css/[name]' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       use: ExtractCSS.extract({ 
        fallback: "style-loader", 
        use: [ 
         "css-loader", 
         "postcss-loader", 
         "sass-loader" 
        ] 
       }) 
      }, 
      { test: /\.(jpg|jpeg|png|svg|gif|woff|woff2|otf|ttf)$/, use: 'ignore-loader' } 
     ] 
    }, 
    plugins: [ 
     ExtractCSS 
    ], 
    watch: true 
}; 

---

package.json

{ 
    "dependencies": {}, 
    "devDependencies": { 
     "css-loader": "^0.26.1", 
     "extract-text-webpack-plugin": "^2.0.0-rc.3", 
     "ignore-loader": "^0.1.2", 
     "node-sass": "^4.5.0", 
     "postcss-loader": "^1.3.0", 
     "sass-loader": "^6.0.0", 
     "style-loader": "^0.13.1", 
     "webpack": "^2.2.1", 
     "webpack-dev-server": "^2.3.0" 
    } 
} 

---

Как вы можете видеть, я попытался использовать ignore-loader, чтобы остановить sass-loader от жалоб на недостающие изображения, но безрезультатно. Честно говоря, я даже не уверен, что это то, как он предназначен для использования.

Как только я удалить все строки, ссылки на изображения из SCSS, все работает просто отлично: style.css и admin.css построению, autoprefixed и упал в css/ папку. Теперь я хочу сохранить его таким образом, но также использовать такие стили, как background-image: url(assets/image.png), без webpack, жалующихся на то, что эти изображения не присутствуют в файловой системе.

Answer 1

Корпус закрыт: Webpack НЕ РАБОТАЕТ. Сообщения в блогах, называя Webpack как преемника Grunt или Gulp, или не могут явно указывать на то, что эти инструменты могут иметь некоторые перекрывающиеся функции, но в итоге имеют очень разные цели. Grunt and Gulp - это бегуны задач, а Webpack - это связующее звено. Попытка сделать Webpack не связывает ваши активы с поражениями, это основная цель, и вам лучше выбрать другой инструмент.