webpack——打包资源

641 阅读4分钟

111.jpg

前面提到了webpack本身的话,可以去打包js和json,但是不能打包样式和图片等资源的。
本章的话我们来分享一下 webPack 如何打包css打包html打包图片打包其他资源的。
这里的话提到前面的一个概念 loader, loader可以来帮webpack翻译一些webpack不能识别的模块或者文件。

1、配置文件

如果想使用webpack中的loader、或者Plugins来进行一些操作的话,那么的话就需要webpakc的配置文件辣!

    webpack.config.js   webpack的配置文件
    作用:指示webpack干哪些活 根据webpack中的配置来进行加载和运行
    
   大致的目录结构
   module.exports = {
        // webpack配置
        // 入口文件
        entry: './src/index.js',
        // 输出
        output: {
            // 输出的文件名
            filename: 'dist.js',
            // 输出路径
            //  _dirname node.js的变量,代表当前文件的目录结对路径
            path: resolve(_dirname, 'dist')
        },
        // 模块对象
        module: {
            // 规则
            rules: [
                // 详细的loader配置
            ]
        },
        // plugins的配置
        plugins: {
            // 详细的plugins配置
        },
        // 模式  两者只能取其一
        mode: 'development' //开发模式
        // mode:'production' 生产模式
    }

1.1 模块化

这里的话提到一点!! 所有的构建工具都是基于node.js平台来运行的 模块化的话默认采用common.js

一般情况下我们进行开发的src文件夹下使用基本都是Es6的模块化
而像webpack这种构建工具的话都是默认是Common.js

什么是模块化

模块化就是将变量和函数 放入不同的文件中 

模块的作用域是私有的 内部定义的代码只能在当前文件中使用 外部使用那么需要将此模块暴露出去

模块化的好处

减少全局变量  避免变量名和函数命名冲突 提高代码的复用性和维护性

ES6

ECMAScript 6 是新版本javascript语言的标准

CommonJS

commonjs 是一种包管理规范,解决js文件依赖于引用,node 应用由各个模块组成,故commonjs规范 ,加载整个模块。webpack打包是基于commonjs规范下的js文件

差异

ES6commonJS
引入方式默认引入  import name from "相对或绝对路径默认引入 require("相对路径或者绝对路径") 如果是第三方模块 只需要填入模块名
输出方式export输出多个,export default 输出一个exports输出多个,module.exports输出一个
加载可以单独加某一个或多个方法(接口)只能加载整个模块,即把所有接口斗殴加载进来
加载时机解析阶段生成接口并对外输出运行阶段加载模块
值的变化输出的是值的引用,原来模块的值改变,则加载值也变输出的值是拷贝的,已经加载的值会使用缓存,即原来模块的值改变,不会影响已加载的该值
this指向指向undefined指向该当前模块

2、打包样式

上面提到了 如果要打包除了js和json之外的资源的话,这里我们就需要用到loader了,通过loader加载文件,转换未webpack能狗识别的moudle。
功能:在这里我们需要打包css的样式,那么就需要css的loader了,style-loadercss-loader

    // 模块对象
    module:{
        // loader的配置
        rules:[{
                // 正则匹配所有以.css结尾的文件 
                test: /\.css$/,
                // 不同的文件就必须需要不同的loader
                use:[
                    // use 数组中loader执行顺序,从右到左,依次执行
                    // 创建一个style标签,将js中的样式资源插入运行,添加到head中生效
                    'style-loader',
                    // 将css文件变成commconjs模块加载到js中,里面内容是样式字符串
                    'css-loader'
                ]
          }]
    },

2、HTML打包

这里的html打包指的是使用一个名为html-webpack-plugin的plugin插件。
需求:在没有这个插件时,我们打完包的js、css等资源是需要手动引入html来运行的。
功能:可以自动引入打包的资源

     plugins: [
     // html-webpack-plugin
     // 根据 template 指定的模板来创建一个html文件,并且会自动的引入打包的所有资源
         new htmlWebpackPlugin({
              template: './src/index.html'// filename: 'index.html'  输出文件名
              . . .
         })
     ]

3、图片等其他资源打包

    module:{
        rules:[{
                // 匹配的图片类型
                test: /\.(jpg|png|gif)$/,
                // 不同的文件就必须需要不同的loader 单个loader可以直接写一个loader,多个loader的话就需要use了
                loader: 'url-loader', // file-loader
                // file-loader打包的图片会给每张图片都生成一个随机的哈希值作为图片的名字
                // loader 的 配置项
                options: {
                    // 优势:将小的,即低于8192字节的图片进行base64编码,以减少http请求,存放到打包后的dist.js文件里。
                    // 劣势: 增大了js或html文件的体积
                    // 问题:因为url-loader默认使用es6模块化解析, 而html-loader引入图片的commonjs解析
                    // 解析时会出现问题:[Object Module]
                    // 解决:url-loader 的es6模块化,使用commonjs解析
                    limit: 8 * 1024,
                    esModule: false,
                    // name: img/[name].[hash:6][ext],
                    //  几个最常用的占位符
                    // 【ext】处理的原文件的扩展名。
                    // 【name】处理的原图片的名字
                    // 【hash】文件的内容,hash值
                    // 【hash:length】hash值去长度
                    // 【contentHash】 在file-loader返回与hash一样,在其他loader可能不同
                    // 【path】 文件相对于webpack配置文件的路径
                }
            },
            {
                test: /.html$/,
                // 处理处理html文件的img图片,负责引入img,然后被url-loader进行处理)
                loader: 'html-loader',
                // 需要关闭es6解析,否则图片显示不出来
                options: {
                  esModule: false
                }
            }]
    }
   
以上都是webpack5之前的写法  在webapck5后已经有了新的属性和用法


webpack5可以使用 资源模块类型(asset module type),替代file-loader等。
资源模块类型通过添加四种新的模块类型,来代替Loader1 asset/resource 发送一个单独的文件并导出URL,替代file-loader,MP3 MP4文件也是一样这样处理即可
2 asset/inline 导出一个资源的data URL,替代url-loader。
3 asset/source 到处资源的源代码,之前通过使用raw-loader实现。
4 asset在导出一个data URL和发送一个单独的文件之间做选择,之前通过url-loader+limit属性实现。

{
    test: /\.(jpg|png|gif)$/,
    type: "asset/resource",
    geneator:{
        filename: img/[name].[hash:6][ext]
    }.
    parser:{
        dataUrlCondition:{
            maxSize: 100 * 1024  // maxSize是就相当于Limit了
        }
    }
}

base64 解析
优:base64在客户端本地解码 所以会减少服务器压力
劣:如果图片过大还继续采用base64编码会导致cpu调用率上升网页加载时变卡

招聘广告

言重式招聘 寻人!!!寻志同道合之人、寻竭忠尽智之人、寻深思远虑之人、寻勤恳至诚之人
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端!!!!!
欢迎大家来聊,有意向可发送简历到chen_zhen@dahuatech.com

人生最困难的事情就是认识自己 ———— 无奖竞猜