问题描述
我正在使用一个内部有 css 文件的节点库，该 css 文件会加载这样的图像
I'm using a node library that has a css file inside, that css file loads an image like this
background-image: url("image.png");
正在http://localhost:9000/(根目录)请求文件image.png"在项目的根目录中到处都是图像是很脏的.
The file "image.png" is being requested at http://localhost:9000/ (the root) is dirty to have images all over the root of the project.
我还有一个问题，我不知道为什么模块的图像文件没有被自动复制到构建文件夹，只有当我手动将图像文件复制到构建文件夹时才有效.使用 Webpack 配置参数，我使用了将图像复制到 root 的功能，但它为它们添加了随机名称，我不希望它们在 root 中.
Also I have another problem, I don't know why the image file of the module is not being copied to the build folder automatically, only works if I copy the image file manually to the build folder.Playing with Webpack config parameters I got working the feature to copy the images to root, but it puts random names to them and I do not want them in root.
我希望所有加载的图像都被复制到构建文件夹内的img"子文件夹中，并使用其原始文件名，并在那里被请求，因此根目录不会被那里的所有文件弄脏.
I want all the images loaded to be copied to a "img" subfolder inside the build folder with thier original file names, and to be requested there, so the root is not dirty with all the files there.
这是我的 webpack 配置文件:
This is my webpack config file:
var webpack = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');
"use strict";
module.exports = {
entry: "./source/typescript/Main.ts",
output: {
filename: "./js/bundle.js"
},
devtool: "inline-source-map",
devServer: {
contentBase: ".",
host: "localhost",
port: 9000,
open: true
},
module: {
rules: [
{
test:/\.(s*)css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
url: false
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|otf|woff|woff2|json|xml|ico)$/,
use: [{loader: 'file-loader'}]
},
{
test: /\.(csv|tsv)$/,
use: [{ loader: 'csv-loader' }]
},
{
test: /\.exec\.js$/,
use: [{ loader: 'script-loader' }]
},
{
test: require.resolve('jquery'),
use:
[
{
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}
]
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
plugins: [
new WebpackNotifierPlugin({excludeWarnings: true}),
//new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) // Uncoment to minify bundle
]
};
推荐答案
我解决了问题:
"outputPath" 和 "name" 参数可用于告诉 webpack 将所有图像文件复制到构建文件夹中的特定文件夹中，并使用特定的命名规则.所以我解决了这样的问题:
"outputPath" and "name" parameters can be used to tell webpack to copy all the image files to a specific folder in the build folder and with a specific name rule. So I solved the problems like this:
1) 根目录中随机文件名复制文件的解决方法:我修改了webpack配置文件，告诉webpack加载的任何图片都应该复制到img子里面的build文件夹中-带有原始名称的文件夹.这是在文件加载器选项中使用outputPath"和name"参数完成的.
1) The solution to the files copied in the root with random file names: I changed the webpack configuration file to tell webpack that any image loaded should be copied to the build folder inside a img sub-folder with their original name. This is done in the file-loader options using the "outputPath" and "name" parameters.
2) 图片文件没有复制到build文件夹的解决方法:去掉css-loader中的"url: false"，现在路径由css-loader管理.(默认行为).我最初设置该选项是因为我不明白 css-loader 如何解析 url，所以我禁用了该功能，因为它抛出了一些错误.现在我意识到 css url() 路径是相对于以/开头的项目的根目录，例如: url("/img/my-image.png");这阻止了 webpack 将图像文件复制到构建文件夹.
2) The solution to the images files not being copied to the build folders: Removed "url: false" in the css-loader, so now the paths are managed by css-loader. (The default behavior). I originally set that option because I didn't understand how css-loader resolves urls so I disabled that feature because it was throwing some errors. Now I realised that css url() paths are relative to the root of the project starting with /, for example: url("/img/my-image.png"); That prevented webpack to copy the image files to the build folder.
现在一切正常，我对加载器的最终 webpack 配置是这样的:
Now everything works, my final webpack configuration of loaders is this:
module: {
rules: [
{
test: /\.(png|jpg|gif|svg|ico)$/,
loader: 'file-loader',
query:{
outputPath: './img/',
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(eot|ttf|otf|woff|woff2|json|xml)$/,
loader: 'file-loader',
query:{
outputPath: './fonts/',
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(json|xml)$/,
loader: 'file-loader',
query:{
outputPath: './data/',
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(s*)css$/,
use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }]
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.(csv|tsv)$/,
use: [{ loader: 'csv-loader' }]
},
{
test: /\.exec\.js$/,
use: [{ loader: 'script-loader' }]
}
]
}
这篇关于使用 webpack 在特定文件夹中加载 css url() 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！