web-dev-qa-db-ja.com

Webpackを使用して特定のフォルダーにcssurl（）ファイルをロードする

私は内部にcssファイルがあるノードライブラリを使用しています、そのcssファイルはこのような画像をロードします

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

ファイル "image.png"が要求されています http：// localhost：9000 / （ルート）がダーティで、プロジェクトのルート全体に画像があります。

また、別の問題があります。モジュールのイメージファイルがビルドフォルダーに自動的にコピーされない理由がわかりません。イメージファイルをビルドフォルダーに手動でコピーした場合にのみ機能します。 Webpackの設定パラメーターで遊んで、画像をルートにコピーする機能を使用しましたが、ランダムな名前が付けられ、ルートに入れたくありません。

ロードされたすべての画像を、元のファイル名でビルドフォルダー内の「img」サブフォルダーにコピーし、そこで要求して、ルートがそこにあるすべてのファイルでダーティにならないようにします。

これは私の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
    ]
};
webpackwebpack-2webpack-4webpack-style-loader
6
fermmm

私は問題を解決しました：

「outputPath」および「name」パラメーターを使用して、すべての画像ファイルをビルドフォルダー内の特定のフォルダーに特定の名前ルールでコピーするようにwebpackに指示できます。だから私はこのような問題を解決しました：

1）ランダムなファイル名でルートにコピーされたファイルの解決策：ロードされた画像をimgサブフォルダー内のビルドフォルダーにコピーする必要があることをwebpackに指示するようにwebpack構成ファイルを変更しました元の名前。これは、「outputPath」および「name」パラメーターを使用してファイルローダーオプションで実行されます。

2）ビルドフォルダーにコピーされないイメージファイルの解決策：css-loaderの「url：false」を削除したため、パスはcss-loaderによって管理されるようになりました。 （デフォルトの動作）。 css-loaderがURLを解決する方法がわからなかったため、最初にこのオプションを設定しました。エラーが発生したため、この機能を無効にしました。ここで、css url（）パスが/で始まるプロジェクトのルートに相対的であることに気付きました。例：url（ "/ 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' }]
            }           
        ]
    }
5
fermmm