鍍金池/ 問答/HTML/ webpack打包之后頁面里的圖片加載不出來??

webpack打包之后頁面里的圖片加載不出來??

webpack.config.js里的配置文件

 var ROOT = utils.fullPath('../');
var config = {
    entry: {
        main: ["./src/entry/main.js"],
        vendor: ["react-dom", "react", "react-router"]
    },
    output: {
        path: ROOT + '/dist',
        filename: _DEV_ ? 'js/[name].js' : 'js/[name].[chunkhash:8].js',
        //按需加載時,對應生成的文件名
        chunkFilename:  _DEV_ ? 'js/[name].js' : 'js/[name].[chunkHash:8].js',
        publicPath: ''
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test:  /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                //注意:在配置in-line模式下熱加載的時候(具體配置查看webpack-dev-js文件),發(fā)現(xiàn)只有css樣式更改的時候可以實現(xiàn)熱加載,
                //更改js文件的時候卻不能實現(xiàn)熱加載,上網(wǎng)查資料,發(fā)現(xiàn)用react進行開發(fā)的時候,需要再配置一個react-hot-loader,具體配置
                //寫法如下,這樣就可以實現(xiàn)js文件的熱更新了。。
                loaders: [
                    'react-hot-loader',
                    'babel-loader?presets[]=react,presets[]=stage-0,presets[]=es2015'
                ]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: 'css-loader',
                            //minimize屬性配置css代碼壓縮
                            options: {minimize: true}
                        },
                        {
                            loader: 'postcss-loader'
                        }
                    ]
                })

            },
            {
                test: /\.less$/,
                //注意,使用less-loader要額外安裝less,不然會報錯
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {sourceMap: true, importLoaders: 1, minimize: true}
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'less-loader',
                            options: {sourceMap: true}
                        }
                    ]
                })
            },
            {
                test: /\.(jpe?g|png|gif|svg|ttf)$/i,
                //注意,使用url-loader要額外安裝file-loader,不然會報錯
                loaders: [
                    'url-loader?limit=8192&name=imgs/[name].[hash:8].[ext]'
                    // 'url-loader?limit=8192&name=imgs/[name].[hash:8].[ext]'
                    // 'image-webpack-loader'  //壓縮圖片
                ]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    plugins: [
        //生成html模板
        new HtmlWebpackPlugin({
            template: './src/entry/index.html',
            filename: 'index.html'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        //    //注意:上述寫法是為瀏覽器緩存設置,我們在項目中提取出來的第三方類庫,由于文件很大,且基本不會改動,所以要利用瀏覽器
        //    //      緩存機制增加訪問速度,但是存在一個問題,如果我們用webpack打包的時候都帶一個hash值,那么每次打包的文件名都會
        //    //      改變,這樣瀏覽器就不會緩存,所以上述設置可以讓webpack打包的時候?qū)Φ谌教崛〉墓参募ash值不變,這樣,瀏覽器
        //    //      就可以緩存了,增加網(wǎng)頁瀏覽速度。要實現(xiàn)這個效果,output中filename屬性設置hash值要用chunkHash
        //    // filename: "vendor.js"
        //    // (給 chunk 一個不同的名字)
        //    //minChunks: Infinity
        //    // 隨著 入口chunk 越來越多,這個配置保證沒其它的模塊會打包進 公共chunk
        }),
        //css文件打包
        // new ExtractTextPlugin("css/[name].[contenthash:8].css"),
        new ExtractTextPlugin("css/[name].css"),
        new webpack.LoaderOptionsPlugin({
            options: {
                //加css3前綴
                postcss: [precss, autoprefixer]
            }
        }),
        //配置全局常量,在業(yè)務代碼中可以直接使用(比如在homePage.jsx中可以直接訪問NODE_ENV這個變量)
        new webpack.DefinePlugin({
            "NODE_ENV": JSON.stringify(process.env.NODE_ENV || 'development')
        })
    ]
};

打包好的文件為:
圖片描述
打開index.html文件后查看未顯示圖片的路徑
圖片描述
控制的臺的錯誤信息:
圖片描述
瀏覽器加載的資源文件:
圖片描述

麻煩能看明白的大神給個正解?。?!非常非常感謝?

-----最新更新

111111.有的圖片能顯示有的圖片不能顯示,他們的路徑不一樣
能顯示出圖片:
圖片描述
不能顯示出圖片:
圖片描述
請問這兩種url路徑為什么不一樣呢?什么導致的呢?
222222.如果我把配置文件里這個css去掉,不給所有的css文件新建個文件夾,那么所有的圖片就都能顯示了
這又是為什么呢?
圖片描述
麻煩大神能給出指導,指點迷津啊。???

回答
編輯回答
不討囍

無法排查問題呢
題主可以如下排查看看

  1. 先確認構建的dist的image目錄下有沒有圖片
  2. 把圖片中的文件名的中文和空格去掉

然后按輸出的圖片地址和引用的地址,其實是無法對應的,真實url地址帶了很多亂碼字符,先查明這個哪里來的

2017年3月17日 20:19
編輯回答
夢一場

解決了嗎,我也遇到同意問題

2017年8月7日 10:03