webpack文件夹打包_webpack打包图片没有出现在dist文件夹中
loader配置如下
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 10000,
name: 'assets/[name].[ext]'
}
},
{loader: "image-webpack-loader"}
]
},
目录结构如下
下面是全部的代码
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/js/script.js",
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: "js/[name].bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: path.resolve(__dirname, "src"),
exclude: path.resolve(__dirname, 'node_modules'),
options: {
presets: ['latest']
}
},
{
test: /\.html$/,
loader: "html-loader"
},
{
test: /\.css$/,
include: path.resolve(__dirname, "src"),
exclude: path.resolve(__dirname, 'node_modules'),
loader: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 10000,
name: 'assets/[name].[ext]'
}
},
{loader: "image-webpack-loader"}
]
},
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body'
}),
]
};
补充：图片大小为4k,控制台没报错
webpack文件夹打包_webpack打包图片没有出现在dist文件夹中相关推荐
- webpack打开项目命令_webpack打包好的页面在项目中怎么运行？
使用webpack打包好了页面和相关的js文件,然后命令输入webpack-dev-server,再浏览器中输入: http://localhost:9090/WebRoot... 打开页面能正常的加 ...
- vue项目执行npm run build 打包出现某些图片，字体，资源文件路径404，无法加载的问题
如图所示: 如果出现如图的错误.首先我们第一步是考虑进入dist文件夹里面的static文件夹 正常情况下static文件夹是非常干净的 如果你发现你的static文件夹出现了多余的img.fonts ...
- php中设置文件权限的写法,php图片上传,如何设置文件权限
我正在上传到777权限文件夹.但是,上载的文件具有664个权限和"nobody"的"owner". 如何更改以下scipt以将文件上载为777并设置所有者? 代 ...
- vs2012打包和部署程序成可安装安装包文件(InstallShield
2012之前,微软自带打包工具,完了项目直接Setup,但是这个比较low. VS2012虽然没有集成打包工具,但它为我们提供了下载的端口,需要我们手动安装一个插件InstallShield.网上有很 ...
- C语言 文件合成器代码（用图片掩盖.rar文件）
隐藏学习资料更加安全了 #include <stdio.h> #include <stdlib.h>/* 玩法:可以将图片和压缩包合成一个文件,通过改后缀名来回切换 */ vo ...
- blob 在线解码_PC端微信下的dat 文件在线解码还原成为图片
第二次更新:中间发现一些图片总是失败,考虑到应该是图片的格式问题,最后兼容了下jpg gif png 这三个格式,基本上能把所有的图片全部转化成功了.(代码已更新) 更新: 先提供一个在线的版本,可以 ...
- 如何将CAD文件转换成GIF格式图片？
如何将CAD文件转换成GIF格式图片?如何将CAD文件转换成GIF格式呢?在进行制图时我们可以保存时选择另存为的方法,可是面对大量的文件该怎么办呢? 1.首先我们启动迅捷CAD转换器.运行软件,进入文 ...
- dat图片 电脑端微信_PC端微信下的dat 文件在线解码还原成为图片
第二次更新:中间发现一些图片总是失败,考虑到应该是图片的格式问题,最后兼容了下jpg gif png 这三个格式,基本上能把所有的图片全部转化成功了.(代码已更新) 更新: 先提供一个在线的版本,可以 ...
- XLSX文件中将url转换成图片写入
XLSX文件中将url转换成图片写入 新建一个xlsx文件,将图片的url放置表格中 取消所有的文件格式,方便处理url转换图片 修改表格大小,方便存储图片,选中即将要转换的表格中的数据,将行高设置为 ...
最新文章
- Jenkins Android gradle只能打包app-release-unsigned.apk
- 抓取标准报表ALV GRID上的数据
- 【搞openssl，看这篇就够了！】openssl1.1.1g编译（windows linux）
- 火山引擎端云一体化服务：打造面向体验的视频云
- gatewayproperties 是空_杨丞琳演唱会踩空，从二楼高台掉到一楼，手脚擦伤，引发网友热议...
- python习题week3
- 常用的JavaScript工具类库收藏
- FreeMarker 基础语法教程
- PPP认证原理和实验
- centos 7安装搭建confluence-wiki
- 欢庆博客达到V5级别，感恩所有程序员
- Java并发之Condition接口
- 微信公众号主体注销了，怎么办理账号迁移和公证？
- 北京驾照到期后如何在郑州换证
- Cocos2d-Html5--打怪升级之路
- android的事件处理和传递机制实例
- IDA PRO 静态反汇编与OllyDbg动态调试实战技巧汇总
- 零基础入门金融风控之贷款违约预测—特征工程
- 降维算法-LDA线性判别分析实例
- 理解promise、promise.all、promise.race