Webpack:忽略 CSS 中对 svg/ttf 文件的引用

Question

我正在使用webpack导出css文件。我正在为 svg/ttf 文件使用文件加载器，但它似乎将它们复制到 dist 文件夹。有没有办法让我的 webpack 在我的 css 中忽略对 svg/ttf 的引用并保持原样？我尝试过忽略加载器，但它只是用 [对象对象] 替换文件路径。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
performance: { hints: false },
mode: 'development',
devtool: 'source-map',
entry: ['babel-polyfill', './js/react-components/src/index.js'],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'js/react-components/dist')
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: 'output.css',
chunkFilename: 'chunk[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
module: {
rules: [
{
test: /.(png|svg|jpg|gif|ttf|eot|svg|woff(2)?)(?[a-z0-9-]+)?$/,
loader: 'file-loader'
},
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
resolve: {
extensions: [".js", ".jsx"]
},
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader,
options: {},
},
"css-loader"
]
}
]
}
};

Answer 1

我有一个类似的用例

使用esModule: false修复路径中的[Object object]。

同时将所有资产放在一个/static/文件夹中(源是目标(。

{
test: /.(svg|png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
outputPath: '../static',
name: '[name].[ext]',
esModule: false
},
},

编辑：好吧，这创建了一个循环npm run watch我放弃了，让文件被复制，把输出路径："./" 我还必须为CleanWebpackPlugin添加一个例外，否则他们

plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['!*.svg']
}), ...