Question

输入：

1）Webpack 3。

2）具有指向OTF字体文件的url的CSS文件。

3）HtmlWebpackPlugin

输出：

1）包含指向样式文件的链接的HTML是从CSS生成的，并带有内联的base64字体。

2）在构建时将此css复制到构建目录。

我应该使用哪些插件？

我发现弄清应该使用哪些插件和工作流程真的很麻烦，如果可以使用copy-webpack-plugin和html-webpack-include-assets-plugin，我似乎没有发现明显的简单解决方案是一个简单的任务。

Answer 1

您应该这样更改webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  }, 
  module: {
    rules: [ 
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 500000, // <------ increase the limit so all fonts use Data-URI
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }, 
    ]
  },

webpack：如何包含带有内联（base64）URL的CSS文件的链接

1 个答案: