[英]Webpack: ignore references to svg/ttf files in css
我正在使用 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"
]
}
]
}
};
我有一個類似的用例
使用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
創建了一個循環,我放棄了,讓文件被復制到 outputPath: './' 我還必須向CleanWebpackPlugin
添加一個例外,否則他們
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['!*.svg']
}), ...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.