Vue06-webpack02

打包其他资源：图片字体

npm install file-loader- D

modeule:{
    rules:[
        {
            test:/\.(jpeg|jpg|png|gif|svg)$/,
            use:"file-loader",
        }
    ]
}

执行： npm run build(前提在package中srcipt修改为build)

以上是在css中使用图片

另外一种情况：img元素的src，使用图片资源

这里是不能正确显示的，路径写死了，应该把图片设置成一个资源，也就是引入

imgEl.src是不能是一个绝对路径的，应该import图片，然后再把路径弹性赋值给imgEl，如图所示：

对打包后的资源进行归并

打包后生成的文件名不能让用户知道是哪一张

在配置文件中webpack.config.js中修改

modeule:{
    rules:[
        {
            test:/\.(jpeg|jpg|png|gif|svg)$/,
            use:{
                loader:"file-loader",
                options:{
                    //outputPath:"img",
                    
                    name:"img/[name]_[hash:6].[ext]" 
                        输出到img文件夹中
                        打包出来的名字和之前文件名是一样的
                        hash:表示唯一命名区分6位hash值
                        ext:使用原来图片的后缀名
                    }
            }
        }
    ]
}

url-loader

和file-loader工作方式相同，但是可以将较小的文件转成base64的URI

base64编码:对服务器的高并发性能的一种优化

npm install url-loader -D
除了loader名和file-loader不一样，其他的配置全部一样
生成到bundle.js文件里；是编码，不再是图片了
modeule:{
    rules:[
        {
            test:/\.(jpeg|jpg|png|gif|svg)$/,
            use:{
                loader:"url-loader",
                options:{                    
                    name:"img/[name]_[hash:6].[ext]",
                    limit:100*1024 就是100kb，对小于100kb的才会打包
                }
            }
        }
    ]
}

asset module type 不需要安装，直接用

使用：

对打包数据的大小限制：

最大不超过100kb

生成的打包数据，放在相应的文件夹里

加载字体文件

举例： 前提：引入对应的.css文件

modeule:{
    rules:[
        {
        test:/\.(eot|ttf|woff2?)$/,
        type:"asset/resource", = file-loader
        
        generator:{
            filename:"font/[name]_[hash:6][ext]" 这里没有 .
        }
        ---------------以下是webpack低版本写法
        use:{
            loader:"file-loader",
            options:{
            生成的文件夹font，命名为之前的名字+hash值+之前的后缀
                name:"font/[name]_[hash:6].[ext]"
                    }
            }
        }
    ]
} 

webpack-插件

1.CleanWebpackPlugin

npm install clean-webpack-plugin -D

这个是类，我们需要引入,webpack.config.js
const path = require('path')
const {CleanWebpackPlugin} = require("clean-webpack-plugin") 

module.exports ={
    plugins:[
        一个一个的插件对象
        new CleanWebpackPlugin()
    ]
}

loader只在加载模块时使用，插件是贯穿整个webpack程序

对index.html打包

npm install html-webpack-plugin -D

之前那个是对象，对象里面的一个类，所以需要解构
这里直接导出就是一个类
const HtmlWebpackPlugin = require("html-webpack-plugin") 

module.exports ={
    plugins:[
        一个一个的插件对象
        new HtmlWebpackPlugin()
    ],
    
    对js文件夹也单独放置
    output:{
        path:path.resolve(__dirname,"./build"),
        filename:"js/bundle.js",
    },
}

DefinePlugin--解决BASE_URL

内置的，不用安装
const {DefinePlugin} = require("webpack") 
plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        template:"./public/index.html",
        title:"..."  会对index.html的title修改
    }),
    new DefinePlugin({
    打包的时候要对BASE_URL进行修改，不然会报错
        BASE_URL:"'./'"  BASE_URL的值是：当前的文件夹
    }),
]

CopywebpackPlugin

有的特殊文件，打包的时候，其实复制一下就行了

npm install copy-webpack-plugin -D

const {CopywebpackPlugin} = require("copy-webpack-plugin") 

new CopyWebpackPlugin({
    patterns:[
        {从public文件夹复制到build中
            from:"public",
            to:"./",
            
            忽略
            globOptions:{
                ignore:[
                    "**/index.html",
                    对public文件夹下的所有index.html忽略
                ]
            }
        }
    ]
})

Mode配置

webpack.config.js文件
module.export = {
设置开发模式
    mode:"development",开发模式/production:准备打包上线
    
    devtool:"source-map", 
    开发模式默认是eval，生成源码时，也会生成source-map文件,建立js映射文件，方便我们调试代码和错误
    
    entry:"./src/main.js"
}

设置成对应模式，其实会默认帮我们写这么多配置