Webpack img(图像)路径错误

时间:2017-07-14 09:15:09

标签: image reactjs webpack path

我在我的项目中使用webpack,我的项目中有两个图像。

第一个图像路径是:/ <强烈的建筑物//strong>/img/1.png(以下称为A) 第二个图像路径是/build/img/2.png,(以下称为B)

这两张照片的路径相同。但是,A可以显示在页面上,B不能显示。

我的webpack.config.js:

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var AssetsPlugin = require('assets-webpack-plugin');
// var assetsPluginInstance = new AssetsPlugin();
// var proxy = require('http-proxy-middleware');

var remotePath = "./__build__/";
fs.readdir(remotePath, function (err, files) {
    if (!err) {
        for (var i = 0; i < files.length; i++) {
            var filesName = files[i];
            if (filesName.indexOf("chunk.js") > 1) {
                fs.unlink('./__build__/' + filesName);
            }
        }
    }
});


module.exports = {
    entry: {
        bundle: "./web_app/index.js"
    },
    devtool: 'cheap-module-eval-source-map',
    output: {
        path: __dirname + '/__build__',
        filename: '[name].js',
        chunkFilename: (new Date()).getTime() + '[id].chunk.js',
        publicPath: '/__build__/'
    },

    devServer: {
        hot: true,
        inline: true,
        proxy: {
            '*': {
                changeOrigin: true,
                //target: 'xxx',
                target: 'xxx',
                secure: false
            }
        }
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            },
        }),

        // new webpack.HotModuleReplacementPlugin(),

        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./__build__/dll/lib-manifest.json')
        }),

        new AssetsPlugin({
            filename: '__build__/webpack.assets.js',
            processOutput: function (assets) {
                return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
            }
        }),

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),

        // new webpack.optimize.UglifyJsPlugin({
        //     mangle: {
        //         except: ['$super', '$', 'exports', 'require']
        //     },
        //     compress: {
        //         warnings: false,
        //     },
        //     output: {
        //         comments: false,
        //     },
        // }),

        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
    ],
    resolve: {
        extensions: ['', '.js', '.jsx'],
        resolve: {
            alias: {
                moment: "moment/min/moment-with-locales.min.js"
            }
        }
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                // loaders: ['babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0'],
                loader: 'babel-loader',
                query: {
                    plugins: ["transform-object-assign", "add-module-exports"],
                    presets: ['es2015', 'stage-0', 'react']
                },
                include: path.join(__dirname, '.')
            }, {
                test: /\.css$/,
                loader: 'style!css'
            }, {
                test: /\.less$/,
                loader: 'style!css!less'
            }, {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                exclude: /^node_modules$/,
                loader: 'file-loader?name=[name].[ext]'
            }, {
                test: /\.(png|jpg)$/,
                exclude: /^node_modules$/,
                loader: 'url?name=[name].[ext]'
            }
        ]
    }
};

my project structure

Image sequence: React code, project directory, dev Tool

我合并了几张图片,因为stackoverflow规则我只能发布两个链接

0 个答案:

没有答案