Webpack 打包资源篇

程序员海军

发布于 2021-10-11 11:02:35

5520

发布于 2021-10-11 11:02:35

继上篇Webpack 初体验后，本章将讲解如何进行打包资源文件，图片的打包以及其它资源呢的打包。以及Webpack的 devServer 自动化。

打包图片资源

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
    }