如何使用的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]’ 
} 

}

记住场，你必须使用“装载机”字段，而不是“使用”字段

所以经验法则是相对路径确保图像退出，否则使用绝对路径。