使用 webpack 2.2.0 时 CSS 字体加载器出错
Posted
技术标签:
【中文标题】使用 webpack 2.2.0 时 CSS 字体加载器出错【英文标题】：Error in CSS font loader when using webpack 2.2.0 【发布时间】：2017-05-21 21:59:49 【问题描述】：我想将 webpack 转移到 v2.2.0。我对配置做了一些更改。在捆绑时没有任何错误之前，但现在我得到了大量的错误，但我猜都是在光滑的旋转木马上。我找不到错误的原因。
附上截图
这是我的 webpack 配置
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const VENDOR_LIBS = [
'react', 'lodash', 'axios', 'base-64', 'leaflet', 'leaflet-routing-machine',
'moment', 'react-bootstrap', 'react-dates', 'react-dom', 'react-geosuggest',
'react-google-places-suggest', 'react-input-range', 'react-intl', 'react-leaflet',
'react-masonry-component', 'react-redux', 'react-router', 'react-router-redux',
'react-slick', 'redux', 'redux-form', 'redux-thunk', 'slick-carousel'
];
const config =
entry:
bundle: './src/index.js',
vendor: VENDOR_LIBS,
,
output:
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
,
module:
rules: [
loader: ExtractTextPlugin.extract(
loader: 'css-loader'
),
test: /\.css$/,
,
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
,
use: [
loader: 'url-loader',
options: limit: 40000
,
'image-webpack-loader'
],
test: /\.(jpe?g|png|gif|svg)$/,
,
test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/, // eslint-disable-line
loader: 'imports-loader?define=>false&this=>window'
],
,
plugins: [
new webpack.optimize.CommonsChunkPlugin(
names: ['vendor', 'manifest']
),
new HtmlWebpackPlugin(
template: 'src/index.html'
),
new webpack.DefinePlugin(
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
),
new ExtractTextPlugin('style.css'),
],
;
if (process.env.NODE_ENV === 'production')
config.plugins.push(
new webpack.optimize.UglifyJsPlugin()
);
module.exports = config;
package.json
"dependencies":
"axios": "^0.15.2",
"base-64": "^0.1.0",
"leaflet": "^1.0.2",
"leaflet-routing-machine": "^3.2.4",
"lodash": "^4.17.2",
"moment": "^2.16.0",
"react": "^15.4.0",
"react-bootstrap": "^0.30.6",
"react-dates": "^4.0.1",
"react-dom": "^15.4.0",
"react-geosuggest": "^2.0.0",
"react-google-places-suggest": "^1.0.1",
"react-input-range": "^0.9.3",
"react-intl": "^2.1.5",
"react-leaflet": "^1.0.1",
"react-masonry-component": "^4.3.1",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",
"react-slick": "^0.14.5",
"redux": "^3.6.0",
"redux-form": "^6.2.0",
"redux-thunk": "^2.1.0",
"slick-carousel": "^1.6.0"
,
"devDependencies":
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.7",
"babel-plugin-react-intl": "^2.2.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"css-loader": "^0.26.1",
"eslint": "^3.10.2",
"eslint-config-rallycoding": "^3.1.0",
"file-loader": "^0.9.0",
"imports-loader": "^0.6.5",
"react-addons-shallow-compare": "^15.4.0",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"html-webpack-plugin": "^2.26.0",
"image-webpack-loader": "^3.1.0",
"webpack": "2.2.0-rc.0",
"webpack-dev-server": "2.2.0-rc.0",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7"
index.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
# <link rel="stylesheet" type="text/css" href="./assets/css/main.css">#
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDclCH64TYf07E67k6dKHyrY573Yt35g9s&libraries=places"></script>
</head>
<body>
<div class="app"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
# <script src="./app.js"></script># htmlwebpack plugin will do it
</body>
</html>
更新
我必须删除这些行才能使其正常工作
// import 'slick-carousel/slick/slick.css';
// import 'slick-carousel/slick/slick-theme.css';
【问题讨论】：
【参考方案1】：只需尝试将以下loader 添加到module 内的配置中：
test: /\.(png|woff|woff2|eot|ttf|svg)$/ ,
loader: 'url-loader?limit=100000'
【讨论】：
我的错。我没有注意到这一点。非常感谢您的帮助。以上是关于使用 webpack 2.2.0 时 CSS 字体加载器出错的主要内容，如果未能解决你的问题，请参考以下文章
使用 webpack 和 postcss-loader 导入字体很棒
无法使用 Webpack 2.2.0 和 webpack-dev-server 2.2.1 进行 HMR（热模块替换）css/scss
如何预加载 webpack4+babel 捆绑的 CSS @font-face 字体？