Webpack，提取文本插件以及图片和字体资源的相对路径

Question

在 webpack 中，我需要将捆绑的 CSS 文件提取到与我的 JS 文件不同的文件夹中，同样的事情适用于图像和字体。结果应该是:

build/
    js/
        bundle.js
    styles/
        css/
            bundle.css
        fonts/
            ...
    images/
        ...

我尝试了许多 webpack 配置的组合，但我无法让它生成这个文件结构，同时在 CSS 文件中生成正确的相对 URL。

我最终得到了这个配置:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var appCssExtractPlugin = new ExtractTextPlugin('styles/css/styles.css');

module.exports = {
    entry: {
        app: __dirname + '/src/client/app/bootstrap.js',
    },
    output: {
        path: __dirname + '/build',
        publicPath: '',
        filename: 'js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components|sc\.js$)/,
                loaders: ['ng-annotate', 'babel?presets[]=es2015']
            },
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                loader: appCssExtractPlugin.extract([], ['css', 'resolve-url', 'sass'])
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                loader: 'url?limit=10000&name=[name].[ext]?[hash]'
            },
            {
                test: /\.(woff|woff2|svg|ttf|eot|otf)$/,
                loader: 'file?name=[name].[ext]?[hash]'
            }
        ]
    },
    plugins: [
        appCssExtractPlugin,
    ]
};

这不起作用 - 输出文件结构是正确的，但在 bundle.css 中，图像和字体的 URL 是错误的，并且与 CSS 文件无关:

url(styles/fonts/abc.woff)
url(images/abc.gif)

有人可以帮我设置正确的配置吗？对于路径、publicPath、提取插件路径、url/文件加载器文件名的组合，我已经没有想法了......

Answer 1

您的公共(public)路径应该是 /而不是一个空字符串。

你必须在你的 sass 加载器中启用 sourceMap sass?sourceMap .见 https://github.com/bholloway/resolve-url-loader#source-maps-required