webpack 单入口项目基础配置教程(六)

这次处理下 图片和字体

先图片

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 里面看到它就是用了这些类型的文件

老老实实配置就是了

然后打包 在浏览器里可以看看效果 蛮好用的

行了 接下来我们搞搞 提取公用模块