打包图片资源

Webpack 用来处理一些文件时， 是选用对应的loader 来 处理打包的，知道这个原理，就好办了。

例如： 打包图片，就找对应的 打包图片的 loader， 1. 安装 2. 使用 ，这样就完成了处理打包。

图片打包使用的是loader 为 url-loader 和 file-loader 来处理打包图片

test： 自定义要处理哪些图片格式

使用url-loader时，可通过options 来配置一些图片的属性，例如大小，

次例子，当图片大小 小于 1MB 转化为Base64 来处理

具体实现

在项目的根目录下 创建一个 webpack.config.js

上面是 Webpack 的具体配，入口文件为 ./src/index.js

在入口文件 index.js 中 导入 要打包的文件，此例子是打包图片资源，

index.js

import './index.css'

index.css

.p1{
    width: 200px;
    height: 200px;
    background: url('./img/f4.png');
}
.p2{
    width: 200px;
    height: 200px;
    background: url('./img/f6.png');
}
.p3{
    width: 200px;
    height: 200px;
    background: url('./img/f7.png');
}

打包后的文件 显示内容

打包其它资源

所谓打包其它资源是，处理之前没有处理过的文件。

此demo 为处理 字体， 采用loader 为 file-loader

关键实现代码

    // 模块
    module:{
        // 打包规则
        rules: [
            // 处理css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 处理其它资源
            {
              // exclude 排除， 除了css  js html  ，其它格式都进行处理，
              // 可以自定义排除 之前处理后的文件
              exclude: /\.(css|js|html)$/,
              // 采用file-loader
              loader:'file-loader'
            }
        ]
    }

打包后的文件

优化后，打包名

    // 模块
    module:{
        // 打包规则
        rules: [
            // 处理css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 处理其它资源
            {
              exclude: /\.(css|js|html)$/,
              loader:'file-loader',
              //通过options 配置来修改文件的配置操作
              options: {
                  // hash：变量名长度  ext 为扩展名
                  name: '[hash:8].[ext]'
              }
            }
        ]
    }

devServe 配置

自动检测src/ 目录下文件变化， 自动刷新页面,自动打包文件

安装依赖npm i webpack-dev-server -D

启动指令 npx webpack-dev-server

主要配置代码

// 在webpack.config.js 下配置devServer   
devServer:{
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        //  自动打开网站
        open: true
    }

启动项目 http://localhost:3000/