字体 - 带有 postcss 的 Webpack

Question

似乎我最近在使用 webpack 时遇到了很多问题 :) 但是这里给你们另一个问题：

文件夹结构

CSS

 @font-face {
    font-family: 'LatoBlack';
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('/font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Webpack 配置

'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var font = require('postcss-font-magician')({
    hosted: '/public/fonts'
});
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');

module.exports = {
    devtool: 'eval-source-map',
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
    entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'src/client/js/Kindred')
        // path.join(__dirname, 'app/main')
    ],
    output: {
        path: path.join(__dirname, '/public/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'app/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                "presets": ["react", "es2015", "stage-0", "react-hmre"]
            }
        }, {
            test: /\.json?$/,
            loader: 'json'
        },
            {test: /\.jpg$/, loader: "file-loader"},
            // Font Definitions
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders&' + qs.stringify({
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[path][name]-[local]'
                    }),
                    'postcss-loader?parser=postcss-scss'
                ]
            },
            { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }            
        ]
    },
    postcss: function (webpack) {
        return [
            stripInlineComments
            , require('postcss-fontpath' , {checkPath: true})
            , font
            , precss
            , autoprefixer
            , require('postcss-simple-vars')
            , require('postcss-nested'
                , autoprefixer({browsers: ['last 2 versions']}))
        ];
    }
};

错误消息

ERROR in ./~/css-loader?importLoaders&modules=true&importLoaders=1&localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../client/font/fontello.eot in C:\var\www\webpack-express-boilerplate\src\client\scss
 @ ./~/css-loader?importLoaders&modules=true&importLoaders=1&localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css 6:876-929 6:955-1008

Answer 1

好的，人们很容易看到我为让它在这里工作所做的工作：

我认为完全删除 scss 并直接使用 css 模块对我来说更容易。这似乎很有帮助。

我使用 git@github.com:christianalfoni/webpack-express-boilerplate.git 帮助我引导自己完成。知道我有一个工作的东西实际上教给我的东西比我之前在 webpack 中学到的要多得多。你可以猜到这不是很多：D

另外一个真正有帮助的主要变化是改变路径，这并不奇怪。但这些与output.path 中的路径性相关，我之前读过此内容，但认为这与wepack.config.js 相关，而不是从那里开始所有内容都算作文档根目录，即使对于 html 和 css 也是如此。

**关键部分:) **

我还必须更新我的快速设置，因为我没有给它一个 express.static 路径...哦，我的愚蠢，我怎么会错过这样一个基本的东西.. 所以：

快递

app.use(express.static(__dirname + '/public/')); //Don't forget me :(

最终 CSS

/* Webfont: Lato-Black */@font-face {
    font-family: 'LatoBlack';
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('/font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Wekpack.config

'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');

module.exports = {
    devtool: 'eval-source-map',
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
    entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'src/client/js/Kindred')
        // path.join(__dirname, 'app/main')
    ],
    output: {
        path: path.join(__dirname, '/public/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]}
            }, {
                test: /\.json?$/,
                loader: 'json'
            },
            {
                test: /\.jpg$/, loader: "file-loader"
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders&' + qs.stringify({
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[path][name]-[local]'
                    }),
                    'postcss-loader?parser=postcss-scss'
                ]
            },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
        ]
    },
    postcss: function (webpack) {
        return [
            stripInlineComments
            , precss
            , autoprefixer
            , require('postcss-simple-vars')
            , require('postcss-nested'
            , autoprefixer({browsers: ['last 2 versions']}))
        ];
    }
};

我还发布了另一个问题的答案。它们都是非常密切相关的，但又是不同的问题。所以我觉得可以再发一次。

我想对所有尝试过的人说声抱歉。我觉得我到最后还差得很远。我只发布此内容，以防有人遇到类似问题。我从中得到的只是要么使用那个样板。或者因为这个原因，html中的静态部分和部分。