Question

我正在使用一个内部有css文件的节点库，该css文件加载了这样的图像

background-image: url("image.png");

文件＆＃34; image.png＆＃34;正在请求http://localhost:9000/（根）是脏的，以便在项目的根目录中包含图像。

另外我还有另一个问题，我不知道为什么模块的图像文件没有自动复制到构建文件夹，只有在我手动将图像文件复制到构建文件夹时才有效。使用Webpack配置参数我得到了将图像复制到root的功能，但是它会随机添加名称，我不希望它们在root中。

我想将所有加载的图像复制到＆＃34; img＆＃34;使用原始文件名在build文件夹中的子文件夹，并在那里请求，因此根目录不会被所有文件弄脏。

这是我的webpack配置文件：

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
    ]
};

Answer 1

我解决了问题：

＆＃34; outputPath＆＃34;和＆＃34;名称＆＃34;参数可用于告诉webpack将所有图像文件复制到build文件夹中的特定文件夹并使用特定的名称规则。所以我解决了这样的问题：

1）使用随机文件名复制到根目录中的文件的解决方案：我更改了webpack配置文件，告诉webpack任何加载的图像都应该复制到img sub中的build文件夹中 - 带有原始名称的文件夹。这是使用＆＃34; outputPath＆＃34;在文件加载器选项中完成的。和＆＃34;名称＆＃34;参数。

2）未将图像文件复制到构建文件夹的解决方案：已删除＆＃34; url：false＆＃34;在css-loader中，所以现在路径由css-loader管理。（默认行为）。我最初设置该选项是因为我不了解css-loader如何解析url所以我禁用了该功能，因为它抛出了一些错误。现在我意识到css url（）路径是相对于以/开头的项目的根，例如：url（＆＃34; /img/my-image.png"）;这阻止了webpack将图像文件复制到构建文件夹。

现在一切正常，我最后的webpack配置是：

    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（）文件

1 个答案: