标签：exp match ati gre plugin nbsp filename stat pac
semantic ui css 的第一行引用了 google web font api，由于不可告人而又众所周知的原因，这条链接在国内无法访问：
@import url(‘https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin‘);
css 是阻塞渲染的，而 css 中的 import 又会进一步阻塞加载和渲染，所以就导致页面样式加载十分缓慢。
像 semantic ui 这样的开源框架，一般使用 npm 或者 bower 安装，也不好去直接修改源码。
借助 webpack 的 string-replace-webpack-plugin 可以将这句引用进行替换，从而解决渲染阻塞问题。
以下是相关 webpack.config.js 配置示例，可供参考：
var path = require(‘path‘) var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘) var StringReplacePlugin = require(‘string-replace-webpack-plugin‘) module.exports = { entry: { common: ‘./static/src/global.js‘ }, output: { filename: ‘[name].js‘, path: path.resolve(__dirname, ‘static/global/‘), publicPath: ‘/static/global/‘ }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({use: [‘css-loader‘]}) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [‘css-loader‘, ‘sass-loader‘] }) }, { test: /semantic\.css$/, loader: StringReplacePlugin.replace({ replacements: [{ pattern: /https\:\/\/fonts\.googleapis\.com[^\‘]+/ig, replacement: function (match, p1, offset, string) { return ‘data:text/css,*{}‘ } }] }) } ] }, plugins: [ new ExtractTextPlugin(‘common.css‘), new StringReplacePlugin() ] }
需要注意的是 webpack v2 中 rule 的结合顺序是从后至前、从右至左，所以 semantic.css 复写的 rule 要放到最后，且不包含其他 loader 设置。
webpack 解决 semantic ui 中 google fonts 引用的问题
标签：exp match ati gre plugin nbsp filename stat pac
原文地址：http://www.cnblogs.com/kaiye/p/6971732.html
