1

我有一个典型的 Webpack 文件，其中包含用于字体、图像、css 的加载器模块，如下所示：

  module: {
loaders: [{
  test: /\.jsx?$/,
  loaders: ['react-hot', 'babel-loader?

presets[]=es2015,presets[]=stage-1,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime'],
      exclude: /node_modules/
    },

工作代码：

    { test: /\.scss$/,
      exclude: /node_modules/,
      loader: ExtractTextPlugin.extract('style', 'css!sass?sourceMap')
    },
   {
       test: /\.(jpg|jpeg|gif|png|svg)$/,
       exclude: /node_modules/,
       include: PATHS.imagesLoc,
       loader: "file-loader?name=img/[name].[ext]"
   },

不工作：

{
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      exclude: /node_modules/,
      loader: 'file-loader?limit=1024&name=fonts/[name].[ext]'
    },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      exclude: /node_modules/,
      loader: "file-loader?limit=1024&name=fonts/test/[name].[ext]"
    }
  ]},
  plugins: [
    new webpack.DefinePlugin({
      'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET)
    }),
    new CopyWebpackPlugin([
      { from: 'images/', to: 'img/' }
    ]),
    new ExtractTextPlugin("css/custom.css")
 ]
};

我的根文件夹包含以下目录：

const PATHS = {
  app: path.join(__dirname, './enter.js'),
  build: path.join(__dirname, './public'),
  fonts: path.join(__dirname, './fonts'),
  cssLoc: path.join(__dirname, './styles'),
  imagesLoc: path.join(__dirname, './images')
};

图像和样式加载器都工作得很好，但由于某种原因，没有一个字体文件被编译到 public/fonts 目录中。

就像我的image和style文件夹一样，字体目录位于应用程序根目录中。在里面./fonts我有两个文件夹，里面有他们的字体内容./fonts/roboto，./fontawesome。这些目录需要反映在里面./public/，但现在我什至无法将字体复制到./public目录中，所以你最终会得到./public/fonts/roboto. 什么都没发生。没有任何警告/错误。我怎么知道我做错了什么？

新的网页包

没有任何内容呈现或复制到 public/ 目录中。没有错误。

var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path');

const PATHS = {
  app: path.join(__dirname, './app-client.js'),
  build: path.join(__dirname, './public'),
  fonts: path.join(__dirname, './fonts'),
  cssLoc: path.join(__dirname, './styles'),
  imagesLoc: path.join(__dirname, './images')
};


if(process.env.NODE_ENV === 'development'){
  var loaders = ['react-hot','babel']
} else {
  var loaders = ['babel']
}

module.exports = {
    devServer: {
        inline: true,
        port: 8080,
        outputPath: PATHS.build
    },
    //bundle app from here
    entry: {
      app: PATHS.app
    },
    output: {
      path: PATHS.build,
      filename: 'bundle.js',
      publicPath: PATHS.build
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-1,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime']
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            },
            {
                test: /\.css$/,
                loader: 'css'
            },
            {
                test: /\.(png|gif|jpe?g|svg)$/i,
                loader: 'url?limit=50000&name=img/[name]' // limit ~50kb
            },
            {
                test: /\.(otf|eot|ttf|woff|woff2)$/,
                loader: 'file?name=assets/fonts/[name].[ext]'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
    },
    node: {
        console: true,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor']
        }),
        new webpack.DefinePlugin({
          'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET)
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin(
            {
                template: './public/index.html'
            }
        )
    ]
}
4

1 回答 1

0

我通常将所有字体扩展名传递一次，如下所示：

{
   test: /\.(otf|eot|ttf|woff|woff2)$/,
   loader: 'file?name=assets/fonts/[name].[ext]'
}

所有字体都被复制到我的 deploy/assets/fonts 文件夹中。

这是我的整个 webpack.config 文件：

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: {
        inline: true,
        port: 3333
    },
    entry: {
        vendor: [
            'bootstrap-loader',
            'angular'
        ],
        'app': './app/app.js'
    },
    output: {
        path: './',
        filename: '[name].js'
    },
    module: {
        loaders: [
            { 
                test: /\.js$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                loader: 'babel',
                query: {
                  presets: 'es2015',
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            },
            {
                test: /\.css$/,
                loader: 'css'
            },
            {
                test: /\.(png|gif|jpe?g|svg)$/i,
                loader: 'url?limit=50000' // limit ~50kb
            },
            {
                test: /\.(otf|eot|ttf|woff|woff2)$/,
                loader: 'file?name=assets/fonts/[name].[ext]'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'        
            }
        ]
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.js']
    },
    node: {
        console: true,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor']
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin(
            {
                template: './index.html'
            }
        ),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
}
于 2016-05-25T03:08:13.823 回答