这次处理下 图片和字体
先图片
yarn add url-loader file-loader --dev
url-loader 和 file-loader 的关系有点像父子集, 但是 url-loader 依赖 file-loader
另外使用 url-loader 在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL
等于说对静态资源加载做了一个优化
修改 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
+ {
+ test: /\.(png|jpg|gif)$/,
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ limit: 8192
+ }
+ }
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
new ExtractTextPlugin("index.css"),
]
};
然后找个图片 丢进 src 文件夹里
- src
- app.jsx
- cut.png
- index.scss
- index.css
- index.html
修改 index.scss 文件
body {
+ background: url('./cut.png');
#app {
font-size: 30px;
}
}
打包
node_modules./bin/webpack
完事 图片也搞定了 你还能在 dist 文件夹里面看到打包后的图片文件
接着处理下字体
这里我们用字体图标来做演示
yarn add font-awesome
这个字体图标库现在蛮主流的 详细的东西可以在它的官网看 我这里就简单使用一下
装好以后在 node_modules 文件夹里可以看到 font-awesome 文件夹 我们拿其中一个压缩后的 css 文件来用
修改 app.jsx 文件
import React from 'react';
import ReactDOM from 'react-dom';
+ import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';
ReactDOM.render(
+ <div>
+ <i className="fa fa-camera-retro fa-5x"></i>
+ <h1>Hello, world!</h1>
+ </div>,
document.getElementById('app')
);
这里的 <i> 标签就是 font-awesome 字体图标的用法, 懒得解释, 官网有说
修改 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
+ {
+ test: /\.(svg|woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
new ExtractTextPlugin("index.css"),
]
};
这里我们处理一般的字体文件后缀名的时候多处理了一个 svg 文件
没辙 字体图标就是这样 你可以在 node_modules/font-awesome/fonts 里面看到它就是用了这些类型的文件
老老实实配置就是了
然后打包 在浏览器里可以看看效果 蛮好用的
行了 接下来我们搞搞 提取公用模块
