我在我的项目中使用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]'
}
]
}
};
Image sequence: React code, project directory, dev Tool
我合并了几张图片,因为stackoverflow规则我只能发布两个链接