10-webpack打包其他资源

最新推荐文章于 2021-07-22 22:06:03 发布

CaRuJan

最新推荐文章于 2021-07-22 22:06:03 发布

阅读量120

点赞数

分类专栏：学习文章标签： webpack

本文链接：https://blog.csdn.net/qq_33290233/article/details/115386307

版权

学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了webpack的配置规则，包括如何处理CSS、图片和HTML资源。通过MiniCssExtractPlugin和url-loader实现了CSS和图片的打包，html-loader处理了HTML中的资源引用。此外，还特别提到了对其他非指定格式文件的处理方式。

摘要由CSDN通过智能技术生成

其他资源
不需要优化和压缩处理，直接输出的资源，称为其他资源。
webpack.config.js

module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包,插入到html里
            use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]  //css兼容loader，单独的css文件
        }, {
            test: /\.(png|jpg|jpeg|gif)$/,               //处理图片资源
            //如果只有一个loader不用数组，就不需要use，直接使用loader
            loader: "url-loader",
            options: {
                publicPath: '../img/',           //打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
                outputPath: 'img/',           //输出路径
                limit: 8 * 1024,                  //图片大小于8KB，就会被base64处理，减少请求数量
                name: '[name][hash:10].[ext]',   //给图片重命名，[hash:10]取图片hash的前10位，[ext]取文件原来的扩展名
                esModele: false
            }
        }, {
            //html-loader处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
            test: /\.html$/,
            loader: "html-loader",

        },{
            //排除以下资源，即其他资源做处理
            exclude: /\.(js|css|html|json|less|scss|jpg|png|jpeg|gif)$/,
            loader: "file-loader",
            options: {
                outputPath: "font/",
                publicPath: "../font",
                name: '[name].[ext]',         //保留原名
            }
        }]
    },

<p>
    <span class="iconfont icon-vue">11111</span><br>
    <span class="iconfont icon-react">11111</span><br>
    <span class="iconfont icon-webpack">11111</span><br>
</p>