Question

只是与我的webpack混淆，并设置了最好的方法来在我的CSS中包含图像的URL，并让它们在开发和构建模式下工作。

以下使用webpack-devserver在dev中工作，但在构建之后没有工作。

.login-container{
  height:100%;
  width:100%;
  background: url('../../images/home3.jpg') no-repeat center center fixed;

在我的配置中。

plugins.push(
            new HtmlWebpackPlugin({
                template: './src/index.html',
                inject: 'body'
            }),
            // Write out CSS bundle to its own file:
            new ExtractTextPlugin({
                filename: 'css/styles.css',
                allChunks: true})
        );

另外

entry: {
        app: './src/app/app.js'
    },
    devServer: {
        outputPath: path.join(__dirname, 'src'),
        contentBase: "./src"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: isProd ? '' : 'http://localhost:8080/',
        filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js',
        chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js'
    },

在开发中它工作正常但在构建之后它试图从我的css文件夹中加载图像

即。 mysites / CSS / 12424324234234234.jpg

而不是

即。 mysites / 12424324234234234.jpg图片真的在哪里。

Answer 1

以下Github问题中发布的这些解决方案可能会对您有所帮助。

<强> Github Issues 1

<强> Github Issues 2

该过程的解决方法可以按此完成

ExtractTextPlugin需要处理像css / [name] .css这样的文件名。作为解决方法，您可以使用[name] .css代替。

设置{ publicPath: '/' }，以便每个引用变为 root relative 。

OR

您也可以使用 url-loader

您还可以查看sokra

发布的此承诺

code loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract(
                "style-loader",
            "css-loader?sourceMap"
            "css-loader?sourceMap",
            {
                publicPath: "../"
            }
            )},
            { test: /\.png$/, loader: "file-loader" }
        ]
    },
    plugins: [
    new ExtractTextPlugin("[name].css?[hash]-[chunkhash]-[name]", {
    new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[name]", {
            disable: false,
            allChunks: true
        }),

webpack以及如何在css中包含图片网址

1 个答案: