webpack 打包css 图片

 

 使用 图片打包工具的意义是 :

 最终图片转换压缩到 最终生成的 js 文件里，不需要页面上再直接加载 图片  

 打包 处理 css 文件里的 img 图片 到 最终的 js 文件里面去

 转成base64

 

 

加载 img 安装文件处理插件    file-loader 

npm install --save-dev file-loader

 

webpack.config.js的 module 模块 配置 改变，其他不变

顺便添加了 performance: 属性，  //  就是为了加大文件允许体积，提升报错门栏。 

module: {     //文件加载器 loader  
       
        /* 单独打包 分离 css  和 js 文件插件开始  */
        rules: [

            {   // 打包 css  
                test: /\.css$/,   // 正则表达式，表示.css后缀的文件
                use: [\'style-loader\',\'css-loader\']   // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            },
                        
            {  //  打包 html 里面的  img 图片
                test: /\.(htm|html)$/i,
                use: \'html-withimg-loader\'
    　　　　},
            { // 打包 css 里面的 img 图片
                test: /\.(png|svg|jpg|gif)$/,
                // use: [\'file-loader\'],
                 use:[
                     {
                        loader:\'url-loader\',
                        options: {
                            name: \'images/[name].[ext]\',
                            //  这里limit属性的作用就是将小于8192B（8.192K）大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理
                            //  如果不写limit属性，那么url-loader就会默认将所有图片转成base64
                           //  limit: 102400  

                           //  file-loader  默认使用了最新版本，返回的是 [object module] ，会导致 打包图片 失败，添加这个
                           esModule:false    
                        }
                     }
                 ]
            }     

        ]

    },   

 performance: {   //  就是为了加大文件允许体积，提升报错门栏。  

        hints: "warning", // 枚举

        

        maxAssetSize: 500000, // 整数类型（以字节为单位）

        

        maxEntrypointSize: 500000, // 整数类型（以字节为单位）

        

        assetFilter: function(assetFilename) {

        

        // 提供资源文件名的断言函数

        

            return assetFilename.endsWith(\'.css\') || assetFilename.endsWith(\'.js\');

        

        }        

    },  

    watch:true ,    //  时时监控