Webpack 打包资源篇

关注公众号，设置为 '星标' ，更多精彩内容，第一时间获取

picture.image

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

打包图片资源

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

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

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

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

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

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

具体实现

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

picture.image

上面是 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'  
            }  
        ]  
    }

打包后的文件

picture.image

优化后，打包名

picture.image

  
    // 模块  
    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  
    }

picture.image