webpack學習筆記——打包后直接訪問頁面，圖片路徑錯誤

我說的這種圖片路徑錯誤是這樣的，運行webpack-dev-server，一切正常，沒有錯誤。當webpack之后，直接打開index頁面，報錯，圖片找不到，找不到的原因是路徑錯誤。

先看我的項目代碼

webpack.config.js

var Webpack = require("webpack");
var path = require("path");

module.exports = {
    entry: './js/entry.js',
    output: {
        path: path.join(__dirname, '/build'),
        filename: 'bundle.js',
        publicPath: "/src/"
    },
    module: {
        loaders: [{
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
            }, 
            {
                test: require.resolve('zepto'),
                loader: 'exports-loader?window.Zepto!script-loader'
            }
        ]
    },
    watch: true,
    devtool: "cheap-module-eval-source-map"
}

這里設置了publicPath,用法點擊這里

index.html中引用路徑如下：

<script type="text/javascript" src="src/bundle.js" ></script>

當運行webapck-dev-server時，http://localhost:8080/顯示正常。

緊接着，要打包，目的是脫離命令能直接訪問頁面。操作如下：

　　1.執行webpack

　　2.將build中的文件全部拷貝到src中

　　3.查看頁面

因為圖片路徑錯誤，所以找不到圖片。

我通過單獨給處理圖片的loader設置publicPath解決了這個問題，如下：

　　　　　　　{
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
                options:{
                    publicPath:'/'
                }
            }

 

 然后測試，webapck-dev-server成功，wepback成功，打開頁面訪問，成功。

路徑是這個樣子的。