如何使用的WebPack

Question

我有有很大的依賴性test.css文件，但我想忽略的WebPack 2

test.css

​​ 所有這些依賴跳過css文件中所有的依賴

我tryed使用webpack.IgnorePlugin，但仍然有一個錯誤Module not found: Error: Can't resolve '../clear.png'

var webpack = require('webpack') 
module.exports = { 
    ... 
    plugins: [ 
     new webpack.IgnorePlugin(/\.(jpe?g|png|gif|svg|ico|ttf|otf|eot|svg|woff(2)?)$/, /test.css/), 
    ] 
} 

我的整個webpack.js文件here。

Answer 1

問題：如果圖像不存在，webpack將無法理解相對路徑。

Soltuion：

1. use absolute path 
2. use options and set url to false 
3. use raw loder as it will loder url as string 

這裏有例子的用例。

module:{ 
    rules:[ 
     { 
      test: /\.s[ac]ss$/, 
      use: ExtractTextPlugin.extract({ 
       //use: ['css-loader', ‘sass-loader’]  , 
       use:[ 
        { 
         loader: ‘css-loader’, 
         options: {url: false} 
        }, 

        ‘sass-loader’ 
       ] 
      }) 
     } 
    ] 
} 

實例與原始裝載機

module: { 
    rules:[ 
     test: /\.s[ac]ss$/, 
     use: ExtractTextPlugin.extract({ 
      use: ['raw-loader', ‘sass-loader’], 
      fallback: ‘style-loader’ 
     }) 
    ] 
} 

還安裝原始裝載機 npm install raw-loader --save-dev

要使用相對路徑，那麼你應該也指定圖像的URL和使用文件裝載

它會移動文件並用一些散列重命名，您可以指定自己的重命名選項。使用「選項」在使用時

{

test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, 
loader: ‘file-loader’, 
options: { 
    name: ‘images/[name].[hash].[ext]’ 
} 

}

記住場，你必須使用「裝載機」字段，而不是「使用」字段

所以經驗法則是相對路徑確保圖像退出，否則使用絕對路徑。