dva+antd项目，使用本地icon-url 打包后没有字体文件，

[linyongping]

dva - 0.6.0
antd - 2.6.4

问题：使用theme.js 来修改icon-url来源为本地，在开发环境下一切正常，但是build后的包文件去不含有iconfont字体文件，打包后的index.css font-family引用地址仍然与开发环境下一致。

修改主题的theme.js

module.exports = () => {
  return {
    '@icon-url': '"/src/assets/iconfont/iconfont"',
    '@border-radius-base': '2px',
    '@border-radius-sm': '2px',
    '@btn-padding-lg': '4px 15px 4px 15px',
  };
};

webpack配置文件 webpack.config.js

module.exports = function (webpackConfig, env) {
    webpackConfig.babel.babelrc = false;
    webpackConfig.babel.plugins.push('transform-runtime');
    webpackConfig.babel.plugins.push(['import', {
        libraryName: 'antd',
        style: true  // if true, use less
    }]);
    // Enable hmr for development.
    if (env === 'development') {
        webpackConfig.babel.plugins.push('dva-hmr');
    } else {
        webpackConfig.UglifyJsPluginConfig.compress.drop_console = true;
    }
    webpackConfig.plugins.push(
        new CopyWebpackPlugin([
            {from: __dirname + '\\favicon.ico', to: 'favicon.ico'},
        ])
    );
    // Parse all less files as css module.
    webpackConfig.module.loaders.forEach(function (loader, index) {
        if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
            loader.include = /node_modules/;
            loader.test = /\.less$/;
        }
        if (loader.test.toString() === '/\\.module\\.less$/') {
            loader.exclude = /node_modules/;
            loader.test = /\.less$/;
        }
        if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) {
            loader.include = /node_modules/;
            loader.test = /\.css$/;
        }
        if (loader.test.toString() === '/\\.module\\.css$/') {
            loader.exclude = /node_modules/;
            loader.test = /\.css$/;
        }
    });

    return webpackConfig;
};

大神指点一下这个是为什么

[linyongping]

打包后的css文件

地址还是与开发环境一样

@font-face {
    font-family: anticon;
    src: url("/src/assets/iconfont/iconfont.eot");
    src: url("/src/assets/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), url("/src/assets/iconfont/iconfont.woff") format("woff"), url("/src/assets/iconfont/iconfont.ttf") format("truetype"), url("/src/assets/iconfont/iconfont.svg#iconfont") format("svg")
}

[nikogu]

https://github.com/dvajs/dva/issues/181

[afc163]

线上页面路径和本地开发环境的页面路径分别是啥？

[linyongping]

打包后的文件路径是 /dist ,开发环境是/src

[afc163]

我是问页面路径并非静态文件路径。

[linyongping]

你说的页面路径是指下面这种吗？不好意思，有点不明白
开发环境：localhost:8989//account
线上路径：http://xxx.com/account

[afc163]

检查下线上的字体文件是否可访问：http://xxx.com/src/assets/iconfont/iconfont.eot

[jokemmy]

😄
[email protected] 版本字体用 相对地址

可以这样写

'@icon-url': `"${path.relative( './~/antd/lib/style/*', './src/assets/iconfont/iconfont' )}"`

dva 新版本这样写不行，因为 webpack 的一个工具包里面有 bug，作者已经在修复了，估计下周新版本上线就好用了

[linyongping]

module.exports = () => {
  return {
    '@icon-url': `"${path.relative( './~/antd/lib/style/*', './src/assets/iconfont/iconfont' )}"`,
    '@border-radius-base': '2px',
    '@border-radius-sm': '2px',
    '@btn-padding-lg': '4px 15px 4px 15px',
  };
};

修改为这样后会报错，

> @ start D:\httpWork\adminGateway\admin-gateway\src\main\resources
> dora   --plugins "proxy?port=8989,webpack,webpack-hmr,browser-history?index=/src/index.html"

          proxy: load rule from proxy.config.js
(node:3540) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
(node:3540) DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
          proxy: listened on 8989
(node:3540) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Invalid argument: options
(node:3540) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

@afc163 打包发布后字体文件无法访问

[afc163]

说明你路径配置的有问题，请保证字体文件不是 404.

[linyongping]

我在主题theme.js 去掉icon-url 使用ali的在线地址后，打包后依然没有对应的字体文件，css文件中的字体连接还是在线的url

[jokemmy]

主题配置文件支持 ES6？我之前试过好像只支持 ES5
不行你就重新 npm install 试试，我这个代码运行绝对ok的
编译后是这样

[linyongping]

暂时使用在线字体地址