Question

我有test.css文件，它有很多依赖项，但我想忽略webpack 2中的所有这些依赖项。

test.css

.foo {
   background: url('../clear.png')
}

我尝试使用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’
                ]
            })
        }   
    ]
}

raw-loader的示例

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

还安装raw-loader npm install raw-loader --save-dev

想要使用相对路径，那么你也应该指定图片网址并使用文件加载器

它将移动文件并使用一些哈希重命名，您可以指定自己的重命名选项。

{

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

}

请记住，在使用“options”字段时，您必须使用“loader”字段而不是“use”字段

所以拇指的规则是在使用相对路径时确保图像从那里出来，否则使用绝对路径。

如何使用webpack跳过css文件中的所有依赖项

1 个答案: