1

次のように、フォント、画像、cssのローダーモジュールを含む典型的なWebpackファイルがあります。

  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、フォントの内容を含む 2 つのフォルダーがあり./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

私は通常、次のようにすべてのフォント拡張子を 1 回渡します。

{
   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 に答える