将webpackconfiguration为在单独的子文件夹中输出图像/字体

我pipe理configurationwebpack输出CSS和JS到各自的子目录，即public/asests/css和public/assets/js 。 但是，我不知道如何做图像和字体的相同。

换句话说，我想要将public/assets/images文件夹和字体中的public/assets/images输出到public/assets/fonts文件夹中。

这是我的webpackconfiguration文件：

 var path = require('path'); var ExtractCSS = require('extract-text-webpack-plugin'); module.exports = { context: path.resolve('private/js'), resolve: ['', '.js', '.jsx', '.es6', '.json'], entry: { homepage: './homepage' }, output: { path: path.resolve('public/assets'), publicPath: '/public/assets/', filename: 'js/[name].js' }, plugins: [ new ExtractCSS('css/[name].css') ], devServer: { contentBase: 'public' }, module: { loaders: [ { test: /\.(es6|js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, exclude: /node_modules/, loader: ExtractCSS.extract('style-loader', 'css-loader') }, { test: /\.less$/, exclude: /node_modules/, loader: ExtractCSS.extract('style-loader', 'css-loader!less-loader') }, { test: /\.(jpg|jpeg|gif|png|woff|woff2|eot|ttf|svg)$/, exclude: /node_modules/, loader: 'url-loader?limit=1024' } ] } } 

Answer 1

我可以通过引用GitHub上的url-loader ＆ file-loader文档来解决这个问题。

所有，我需要做的是在加载器中添加一个名称查询string参数指定完整的path。 我还了解到，您可以指定如何在输出位置命名文件。

 { test: /\.(jpg|jpeg|gif|png)$/, exclude: /node_modules/, loader:'url-loader?limit=1024&name=images/[name].[ext]' }, { test: /\.(woff|woff2|eot|ttf|svg)$/, exclude: /node_modules/, loader: 'url-loader?limit=1024&name=fonts/[name].[ext]' } 

Answer 2

 { test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i, include: folders.npm, loader: 'file?name=fonts/[name].[ext]' }, { test: /\.(jpe?g|png|gif|svg|ico)$/i, include: folders.src, loaders: [ 'file?name=images/[sha512:hash:base64:7].[ext]', 'image-webpack?progressive=true&optimizationLevel=7&interlaced=true' ] } 

这是我在生产中使用的。 我经常遇到使用* .svg图片和SVG字体进行IE回退的情况。 这里我假设字体总是在node_modules里面。 我也看到开发test: /fonts\/[w+].(svg|eot ....) .( test: /fonts\/[w+].(svg|eot ....) 。