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

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问题1

Github问题2

该过程的解决方法可以这样做

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

设置,{ publicPath: '/' }以便每个引用成为根相对.

要么

你也可以使用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
        }),