![](/img/trans.png)
[英]Webpack [url/file-loader] is not resolving the Relative Path of URL
[英]webpack 1 file-loader relative file path
我需要将js,图像,字体,css输出到不同的目录。 Webpack已相应配置,并将文件放置在分发目录中的正确目录中:
/dist
/dist/images
/dist/css
/dist/js
/dist/fonts
我还必须解压缩css文件,因此,我注意到用于将字体和图像放置在正确目录中的file-loader选项无法生成正确的url,因此文件无法加载到网页浏览器。
http://foobar.com/assets/css/main.css
http://foobar.com/assets/css/assets/images/foobar.png
当预期的时候
http://foobar.com/assets/images/foobar.png
webpack配置文件如下:
var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = require('./config');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'assets/js/bundle-[hash].js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') },
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=fonts' },
{ test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=images/'}
]
},
plugins: [
new ExtractTextPlugin("assets/css/[name].css"),
new HtmlWebpackPlugin({
inject: true,
template: __dirname + '/src/' + 'index.html',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
'PORT_NODE_SERVER': config.port.node_server_prod_port
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
}
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true
},
output: {
comments: false,
},
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
};
我找到了解决方案。 似乎webpack v1需要有关基本路径的提示才能解决此问题,因此,需要完整的基本路径,如下所示:
var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = require('./config');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'js/bundle-[hash].js',
publicPath: '/myapp/assets'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') },
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=/fonts/[name].[ext]' },
{ test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=/images/[name].[ext]'}
]
},
plugins: [
new ExtractTextPlugin("css/[name]-[hash].min.css"),
new HtmlWebpackPlugin({
inject: true,
template: __dirname + '/src/' + 'index.html',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
'PORT_NODE_SERVER': config.port.node_server_prod_port
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
}
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true
},
output: {
comments: false,
},
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
};
有关/myapp
,请http://foobar.com/myapp
,然后http://foobar.com/myapp/assets/js/bundle-438348934.js
http://foobar.com/myapp
,然后http://foobar.com/myapp/assets/js/bundle-438348934.js
http://foobar.com/myapp/assets/fonts/myfont.woff
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.