Npm 使用Webpack 2将字体文件打包到单独的目录中

我正在尝试在Cordova应用程序中使用Webpack 2和Font Awesome。Cordova应用程序生成如下文件结构：

app
config.xml
hooks
node_modules
package.json
platforms
plugins
webpack.config.js
www

css
fonts
img
index.html
js

（这自然包括我的NPM文件和网页包配置，作为上下文。

app

是我保存原始JSX源代码的地方）

www

下的结构（编译出的web应用程序应该在这里）如下所示：

app
config.xml
hooks
node_modules
package.json
platforms
plugins
webpack.config.js
www

css
fonts
img
index.html
js

我创建了

字体

目录作为网页配置的目标。我遇到的问题是，我可以将字体复制到根目录下的某个有用的位置，也可以将过滤后的CSS更正，但不能两者兼而有之

例如，如果我使用如下示例：

        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            loader: "file-loader?name=[name].[ext]&outputPath=www/fonts/&publicPath=/fonts/"
        }

这些文件被放在

www

下，但编译后的源代码却很奇怪

@font-face {
  font-family: 'FontAwesome';
  src: url(/fonts/www/fonts/fontawesome-webfont.eot);
  src: url(/fonts/www/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(/fonts/www/fonts/fontawesome-webfont.woff2) format('woff2'), url(/fonts/www/fonts/fontawesome-webfont.woff) format('woff'), url(/fonts/www/fonts/fontawesome-webfont.ttf) format('truetype'), url(/fonts/www/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

---

当我试图在

www

下放置字体时，我还没有找到一种适合文件加载器的方法。和中的建议没有给我任何帮助。

文件加载器中的

输出路径

选项与您的输出目录相关，因此将包含在路径中。而

publicPath

只是将给定路径添加到所用路径的开头，这基本上意味着输出目录将位于服务器上的其他位置。这使得原始路径保持不变，因为目录中的结构必须保持不变

要使其如您所述工作，您需要更改处理输出目录的方式。正如您已经提到的，您的输出目录是

www

，这是webpack应该放置所有内容的地方。因此，将配置为

www

是有意义的

output: {
  path: path.resolve(__dirname, 'www'),
  // Other output options
}

这样，您就不需要在每个输出名称/路径中指定

www

。例如，您可能已经按照以下方式做了一些事情：

filename:'www/bundle.js

，现在它变成了

filename:'bundle.js'

。尽管结果是相同的，但背后的概念却不同，因为您只是告诉webpack将输出文件放在何处，但只有文件名本身与任何处理相关，而输出目录与此无关

现在，您必须将

文件加载器中的
输出路径
更改为
字体
，如果没有
公共路径
，您将获得以下URL：

url(fonts/fontawesome-webfont.eot);

这是一个相对路径，您可能希望将其设置为服务器相对路径。唯一缺少的是前导的
/
，因此您将
公共路径设置为
/
，您的规则变为（使用更好的webpack 2语法，而不是内联选项，这样更易于阅读）：

您可能希望其他加载程序（包括资产）也遵守相同的公共路径，因此您可以在中设置它，而不是为每个加载程序定义它

设置输出路径是关键。谢谢