webpack4 学习时打包图片时遇到的问题

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: "http://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设置的上线 就用 这个程序处理

}

webpack4 学习时打包图片时遇到的问题相关推荐

html5图片怎么打包,webpack如何打包图片
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 初学webpack打包图片的时候,会遇到几种情况,需要注意. 首先在webpack中打包图片需要依赖于url-loade ...
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
使用webpack打包图片文件在scr目录下创建image文件夹,并且添加几张图片在main.js使用import方式引入所有图片,并且append到app节点下 // 引入图片资源 import ...
Webpack4 学习笔记 - 02：loader 打包静态资源（图片）
什么是 loader? 看官网的解释:loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript).loader 可以将所有类型的 ...
python打包程序时窗口设置_Python Pyinstaller 打包程序及遇到的问题总结
一.如何打包py程序 1.安装打包模块 pip install pyinstaller 2.定义保存包的路径 CMD ,CD 比方:把最终*.exe运行文件,保存到H盘 install 文件夹下. 输 ...
maven 打包部署时访问远程仓库中没有的jar
maven 打包部署时访问远程仓库中没有的jar maven构建项目你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文 ...
取消华为mate30 删除图片时手机弹出提示：“..检测xx删除了图片..“
问题:删除图片时,华为mate30出现下拉栏如下图的提示 (该截图引用于此文章) 原因:这里其实是华为mate30已经删除了图片,但是系统重新将图片保存在删除的列表,为的是防止用户误删 (该截图也是引 ...
解决别人在收到我们发送的*.md文档时，图片无法显示的问题。
原因: .word格式其实是一个压缩包,把图片也放在里面了,所以我们在收到word文件后,可以正常查看其中的图片. 但是.md格式不同,一般的,我们需要同时传输.md文档和图片,或者他 ...
pycharm打包exe时加上窗体及exe桌面图标
一.pycharm打包exe时加上窗体及exe桌面图标 1.首先添加图片文件转py文件得工具pyrcc 打开File中的Settings 2.按步骤添加工具名称 Name:Pyqrc Program: ...
为什么在css里使用background-image插入背景图片时，浏览器没有任何反应
在今天写页面的时候遇到一个这样的问题,不知道有没有跟我一样遇到过这样类似的问题"在css里使用background-image插入背景图片时,浏览器没有任何反应"并且css引用语法 ...

webpack4 学习时打包图片时遇到的问题

webpack4 学习时打包图片时遇到的问题相关推荐

最新文章

热门文章