使用 webpack 分离字体和 css

Question

我想要实现的是将 .less 提取到带有字体的 .css 文件中，并将每个文件放在单独的目录中，如下所示：

web/
   assets/
      css/
         - style.css
      fonts/
         - glyphicons-halflings-regular.eot
      js/
         - style.js

但重点是css文件表示同级字体目录

style.css

...src:url(./fonts/glyphicons-halflings-regular.eot)...

webpack.config.js

const path = require("path");

const webpack = require("webpack");

const merge = require('webpack-merge');
const validate = require('webpack-validator');

const parts = require('./lib/parts');

const PATHS = {
    style: path.join(__dirname, 'sources', 'less'),
    build: path.join(__dirname, '..', 'web/assets')
};

const common = {
    entry: {
        style: PATHS.style
    },
    output: {
        path: PATHS.build,
        filename: './js/[name].[chunkhash].js',
        chunkFilename: '[chunkhash].js',
        publicPath: 'assets/'
    }
};

var config;

switch (process.env.npm_lifecycle_event) {
    case 'build':
        config = merge(
            common,
            parts.extractStyles(PATHS.style)
        );
        break;
}

module.exports = validate(config);

lib/parts.js

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

exports.extractStyles = function(paths) {
    return {
        module: {
            loaders: [
                {
                    test: /\.less$/,
                    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
                    include: paths
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                    loader: 'url-loader',
                    query: {
                        limit: 10000,
                        name: './fonts/glyphicons-halflings-regular.[ext]'
                    }
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].[chunkhash].css')
        ]
    };
};

如有任何帮助，我们将不胜感激。

Answer 1

所以我设法使用 ExtractTextPlugin.extract 中的选项参数解决了我的问题：

lib/parts.js

exports.extractStyles = function(paths) {
    return {
        module: {
            loaders: [
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    loader: 'file-loader',
                    query: {
                        name: '../fonts/glyphicons-halflings-regular.[ext]'
                    }
                },
                {
                    test: /\.less$/,
                    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader', {publicPath: '../'}),
                    include: paths
                },
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    loader: 'file-loader',
                    query: {
                        name: './fonts/glyphicons-halflings-regular.[ext]'
                    }
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].[chunkhash].css')
        ]
    };
};

使用 webpack 分离字体和 css

Separate fonts and css using webpack

css

webpack

webpack-style-loader