Webpack 2：SASSをコンパイルして「モジュールが見つかりません：エラー：解決できません./assets/image.png」」

Question

Gulpの代わりにWebpackをタスクランナーとして使用しようとしています。これまでCompassでやっていたすべてのSCSSファイルをコンパイルしていました。主な目的は以下のとおりです。

1. 実行Autoprefixerと部分
2. ない各SCSSに個別のCSSファイルを生成する画像をバンドルするか、連結していないCSSファイル
3. キープ画像のURL例えば、あるとしてbackground-image: url(assets/image.png)
4. 画像が

＃1を見つけることができない場合は、エラーをスローすることはありませんが解決し、を働いている、しかし、それは動作を停止して、すぐに＃3のように、画像へのSCSSリンクなどのエラーがスローされます上記の：

私は「単純に」そのエラーを無視して、不足しているファイルをローカルのハードドライブにコピーしないでください。それはほとんど私が頑固で、考えているだけです。"Compassはこれらの画像が存在する必要はありませんでしたが、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が組み込まれ、自動プレフィックスが適用され、css/フォルダにドロップされます。今私はそれをそのままにしておきたいだけでなく、ファイルシステムに存在していないイメージについてwebpackに苦情を言うことなくbackground-image: url(assets/image.png)のようなスタイルを使用します。

Answer 1

ケースが閉じられました：Webpackはタスクランナーではありません。 BlogpackがWebpackをGruntやGulpの後継者として指定したり、これらのツールに重複している機能がいくつかありますが、最終的には非常に異なる目標があることを明示的に示していません。 GruntとGulpはタスクランナーであり、Webpackは資産バンドラーです。 Webpack をにバンドルしないようにしようとすると、資産が主な目的に反してしまい、別のツールを選択した方が良いでしょう。