webpack打包图片时遇到的问题（代码实例）

webpack打包图片时遇到的问题（代码实例）

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');//代码压缩插件
const htmlPlugin = require('html-webpack-plugin');//html 打包工具
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');//css 分离工具
const webPath = {
    publicPath: "https://192.168.1.105:8080/"//配置文件的路径
};
const webpack = require('webpack');

const config = {
    mode: 'development',//production
    entry: {//入口
        search:'./src/search.js'
    },
    output: {//出口
        path: path.resolve(__dirname,'dist'),//出口的目录
        filename: '[name].js',//
        publicPath: webPath.publicPath
    },
    module: {//css //图片 //图片压缩
        rules: [//规则
            {
                test:/\.css$/,//正则匹配
                use: extractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
                //loader:['style-loader','css-loader'],第一种写法
                //use:['style-loader','css-loader'],//使用的组件  第二种写法
                /*use:[{//第三种写法（常用）
                 loader:'style-loader'
                },{
                    loader:'css-loader'
                }]*/
                //include:'',//那些文件不需要处理
                //exclude:'',//那些文件需要处理
                //query:"" 可选的额外配置项
            },
            {
                test:/\.(gif|png|jpg|woff|svg|ttf|eot)$/,//图片的处理
                use:[{
                    loader:'url-loader',
                    options: {
                        limit:500,//当图片小于这个值他会生成一个图片的url 如果是一个大于的他会生成一个base64的图片在js里展示
                        outputPath: 'img/',// 指定打包后的图片位置
                        name:'[name].[ext]?[hash]',//name:'[path][name].[ext]
                        //publicPath:output,

                    }
                }, /*{
                    loader: 'file-loader',
                    options: {
                        limit:50,
                        name: '[name].[ext]?[hash]',
                        outputPath: 'img/',
                    }

                }*/]
            }
        ]
    },
    plugins: [//插件
       // new uglify(),使用压缩组件(实验发现，生产环境不需要此插件也可以压缩)
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true,//去掉属性值后的双引号
            },
            hash:true,//去除缓存
            template:'./src/index.html'//模板文件
        }),
        //new webpack.HotModuleReplacementPlugin(),

        new extractTextWebpackPlugin('./css/index.css')
    ],
    devServer: {//服务配置
        contentBase:path.resolve(__dirname,'dist'),//根路径
        host:'192.168.1.105',//域名
        compress: true,//开启服务器压缩
        port:'8080',//端口号
    }

};

module.exports = config;

Webpack 图片
Npm install file-loader url-loader –save-dev 安装图片的依赖包
9、
css 分离
依赖插件
npm install extract-text-webpack-plugin –save-dev // webpack4 不能用
请用 npm install extract-text-webpack-plugin@next --save-dev

注意 url-loader 和 url-loader 使用一个就好url-loader 依赖于file-loader是对file-loader又封装了一层。url-loader的配置都可以使用

url-loader
{
limit //设定大小限制大于他就用文件形式，小于就压缩成base64为
mimetype: 'image/png‘设置文件的MIME类型。如果未指定，则将使用文件扩展名来查找MIME类型。
fallback: 'responsive-loader' //表示超过limit设置的上线 就用 这个程序处理

}