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

您的公共路径应为/而不是空字符串。

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

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

1 个答案: