Question

我使用font-awesome-webpack加载font-awesome而我的webpack.config.js是

'use strict';

const webpack = require('webpack');

const siteRoot = '_site';
// for browserSync
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
// for clean folders before building
const CleanWebpackPlugin = require('clean-webpack-plugin');
// for creation of HTML
const HtmlWebpackPlugin = require('html-webpack-plugin');
// for extract css
const ExtractTextPlugin = require('extract-text-webpack-plugin');


// path
const path = require('path');
const PATHS = {
  app: path.join(__dirname, 'src'),
  bin: path.join(__dirname, '')
};

// for get multiple entry list
function getEntryList (type) {
  let glob = require('glob');
  let fileList = [];

  let entryList = glob.sync(PATHS.app+'/**/*.'+type).reduce(function(o,v,i) {
    let regex = /([^\/]+)(?=\.\w+$)/;
    let index = v.match(regex)[0];
    o[index] = v;
    return o;
  },{});
  return entryList;
} 

/**
 * loop multiple files
 */
let entryHtmlPlugins = Object.keys(getEntryList('pug')).map(function(entryName){
  let v = getEntryList('pug')[entryName]; // get full path
  let filenamePath = v.split(/src\/([^.]*)/)[1] +'.html';
  let templatePath = v.split(/(src\/.*)/)[1];
  // filter chunks config
  let chunkList = [];
  switch(entryName){
    case 'default':
      chunkList.push('commons','index');
  }
  return new HtmlWebpackPlugin({
    filename: filenamePath,
    chunks: chunkList,
    template: templatePath
  })
});

module.exports = {
  entry: getEntryList('ts'),
  output: {
    path: PATHS.bin,
//    publicPath: '{{site.baseurl}}/',
    publicPath: './',
    filename: 'js/[name]-[hash:8].js'
  },
      // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js","styl"]
    },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'jshint'
      }
    ],
    loaders: [
      /********* css to js */
      {
        test: /\.css$/,
        exclude: ['/node_modules/'],
        loader: ExtractTextPlugin.extract('style',['css'],{publicPath:'./fonts/'})
      },
      /********* pug to js */
      {
        test:/\.pug$/,
        exclude: /node_modules/,
        loader: 'pug-html-loader',
        query: {
          pretty: true
        }
      },
      /********* ts to js */
      {
        test:/\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      },
      /********* stylus to css*/
      {
        test: /\.styl$/,
        exclude: ['/node_modules/','/src/css/includes/'],
        loader: ExtractTextPlugin.extract('style',['css','stylus'])
      },
            // the url-loader uses DataUrls. 
      // the file-loader emits files. 
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
      ,
      /********* url loader*/
      {
        test: /\.(png|jpg)$/,
        exclude: /node_modules/,
        loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]'
      }
    ]
  },
  watch: true,
  plugins: [
    /** clean folders */
    new CleanWebpackPlugin(['css','js','_site/js','_site/css'],{
      root: __dirname,
      verbose: true,
      dry: false 
    }),
    /** commonsPlugin */
    new webpack.optimize.CommonsChunkPlugin("commons", "js/commons-[hash:8].js"),
    /** extract css */
    new ExtractTextPlugin('css/[name]-[hash:8].css'),
    new BrowserSyncPlugin({
      files: [siteRoot + '/**'],
      host: 'localhost',
      port: 3000,
      server: { baseDir: [siteRoot] }
    },{reload:true})
  ].concat(entryHtmlPlugins),
  jshint: {
    esversion: 6
  }
};

我只是想使用font-awesome，但是css中的url路径总是错误的，输出css就像：

@font-face {
  font-family: 'FontAwesome';
  src: url(./fonts/25a32416abee198dd821b0b17a198a8f.eot);
  src: url(./fonts/25a32416abee198dd821b0b17a198a8f.eot?#iefix&v=4.6.3) format('embedded-opentype'), url(./fonts/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2) format('woff2'), url(./fonts/c8ddf1e5e5bf3682bc7bebf30f394148.woff) format('woff'), url(./fonts/1dc35d25e61d819a9c357074014867ab.ttf) format('truetype'), url(./fonts/d7c639084f684d66a1bc66855d193ed8.svg#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

并且输出字体文件位于./但不是./fonts/。

这意味着输出字体始终使用publicPath of output，但不是ExtractTextPlugin.extract('style',['css'],{publicPath:'./fonts/'})。我做错了什么？

Answer 1

我修复了它，解决方案是URL-loader?name=path更改文件路径，因为ExtractTextPlugin只能更改CSS URL路径。

但如果您的CSS网址路径与您的网址路径匹配，则可以在ExtractTextPlugin中调整您的publicPath。

例如：

您的文件夹树就像

root
|
|__CSS
|
|__fonts
|
|__src
|
|__js

在webpack配置中

    loaders: [
        {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file?&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml&name=./fonts/[name]-[hash].[ext]"
      },
      /********* css to js */
      {
        test: /\.css$/,
        exclude: ['/node_modules/'],
        loader: ExtractTextPlugin.extract('style',['css'],{publicPath:'.'})
      },

参考：

[1] How to configure font file output directory from font-awesome-webpack in webpack?

[2] https://github.com/webpack/extract-text-webpack-plugin/issues/213

extract-text-webpack-plugin publicPath选项不起作用

1 个答案: