Javascript 网页包1文件加载程序相对文件路径

我需要输出的js，图像，字体，css到不同的目录。相应地配置了Webpack，并将文件放置在分发目录中的正确目录中：

/dist
/dist/images
/dist/css
/dist/js
/dist/fonts

我还必须提取css文件，因此，我注意到用于将字体和图像放入正确目录的文件加载程序选项没有生成正确的url，因此文件无法加载到web浏览器中

http://foobar.com/assets/css/main.css
http://foobar.com/assets/css/assets/images/foobar.png

在预料之中

http://foobar.com/assets/images/foobar.png

网页包配置文件如下所示：

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

和so

http://foobar.com/myapp/assets/fonts/myfont.woff

---

希望这有帮助

你能试试加载器：'文件加载器吗？name=images/[name].[ext]&publicPath=assets'}？是的，我想尝试了这个变体，但没有成功。我找到了一个解决方案，我将与大家分享。我认为如果您使用动态

publicPath

，它将不会起作用。