【webpack】使用webpack打包图片文件、打包时生成单独的css文件

使用webpack打包图片文件

在scr目录下创建image文件夹，并且添加几张图片
在main.js使用import方式引入所有图片，并且append到app节点下

// 引入图片资源
import i1 from './image/image1.png'
import i2 from './image/image2.png'// 创建图片对象
let img1 = document.createElement('img')
img1.src = i1
let img2 = document.createElement('img')
img2.src = i2// 获取app容器
let app = document.getElementById('app')// 将图片添加到app容器中
app.appendChild(img1)
app.appendChild(img2)

执行webpack，会出现报错信息，提示需要loader:

ERROR in ./src/image/image1.jpg 1:0
Module parse failed: Unexpected character ‘�’ (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./src/main.js 9:0-35 13:48-50

安装file-loader@5.0.2

npm install file-loader@5.0.2 -D

在webpack.config.js的module的rules中添加内容：

  module: {rules: [// 处理图片文件{// 处理png、jpg、gif类型的文件test: /\.(png|jpg|gif)/i,use: ['file-loader']}]},

再重新执行webpack命令，在浏览器预览index.html即可看到图片

将小图片转为base64编码，减少请求次数

安装url-loader@3.0.0

npm install url-loader@3.0.0 -D

把image文件夹下的其中一个图片缩小，我把它缩小到只有3k大小
修改webpack.config.js中的module的rules，将刚才的file-loader注释掉

  module: {rules: [{// 处理png、jpg、gif类型的文件test: /\.(png|jpg|gif)/i,// use: ['file-loader']use: [{// 具体使用的loaderloader: 'url-loader',// 配置该loader的选项options: {// 超过指定大小的图片参与打包，否则转为base64编码，单位是字节limit: 1024*4, // 超过4kb大小的图片参与打包// 将打包的图片统一放到img目录下，名称为：图片名称+8位hash码+图片后缀name: 'img/[name].[hash:8].[ext]'}}]}]},

将dist目录删掉重新执行webpack，可以发现新生成的dist目录下只有一个图片，这样就成功使用url-loader了

在html中引用图片

直接在html中引用图片，路径如:’./src/image/image1.jpg’，在开发时候是可以显示，但是打包之后文件的目录和名称都发生了变化，这样原原本本打包出来的html所引用的图片就会找不到资源
下载html-loader@0.5.5处理html

npm install html-loader@0.5.5 -D

在模板html中添加代码（public目录下的index.html）:

<img src="../src/image/image1.jpg" alt="">

执行webpack命令之后发现生成的html中img标签内容是这样的：

<img src="[object Module]" alt="">

上面生成的标签是无法正常显示的。原因是url-loader默认是采用es6的模块化，而html-loader默认是采用commonjs模块化。解决办法：在url-loader的options配置中增加一项：

// url-loader默认使用的是es6模块化，html-loader采用的是commonjs模块化
esModule: false // 这边关闭es6模块化，统一使用commonjs模块化

以css的background属性引用图片也可以正常显示。

webpack打包时生成单独的css文件

观察打包的文件夹dist可以发现，虽然我们的源码有css文件，但是打包之后并没有生成css文件，样式代码都嵌在了app.js中。
安装插件mini-css-extract-plugin@0.9.0

npm install mini-css-extract-plugin@0.9.0 -D

在webpack.config.js
- 引入插件

// 引入将css生成单独文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

修改css的loader，将style-loader改成插件的loader

// 处理css文件2（使用css插件之后）
{test: /\.css$/i,// 注意此处的style-loader改成使用MiniCssExtractPlugin插件的loaderuse: [MiniCssExtractPlugin.loader, 'css-loader']
},

在plugins配置项中引用插件

// 使用单独生成css文件的插件，打包时会将css文件独立出去
new MiniCssExtractPlugin({// 指定文件的输出路径和文件名filename: 'css/index.css'
})

重新执行webpack可以看到生成了css目录，下面有index.css文件

【webpack】使用webpack打包图片文件、打包时生成单独的css文件相关推荐

解决VScode在保存less文件时，自动生成对应的css文件以及安装Easy less之后，计算式子不显示结果的问题
解决VScode在保存less文件时,自动生成对应的css文件以及安装Easy less之后,计算式子不显示结果的问题一.解决VScode在保存less文件时,自动生成对应的css文件的问题下载安 ...
[msi]读取文件.msi时出错。请确认文件存在，并且您可以访问改文件
读取文件.msi时出错.请确认文件存在,并且您可以访问改文件解决: 给temp目录增加完全控制权限 cacls "%temp%" /t /e /c /g Users:F
【KLEE执行时生成的标准全局文件】
Standard Global Files 1 KLEE执行时总会生成的文件 1.1 info info是一个txt文件,它包含与KLEE运行相关的信息.具体地,它记录运行KLEE的命令行语句及其执行 ...
css文件如何设置scss,Webpack - 如何将scss编译成单独的css文件？
2 个答案: 答案 0 :(得分:3) 这是我在尝试将css编译成单独文件时使用的webpack.config.js文件 |-- App |-- dist |-- src |-- css |-- he ...
匿名内部类编译时生成多个class文件
由于线上代码出问题,需要增量上线.就遇到了以下问题:个性一个内部类后重新挂载对应的class文件,结果发现无效. 增量上线就是把你更改的java文件在本地编译成为.class文件,然后直接将.clas ...
删除文件夹时，显示“错误0x80070091 文件夹不是空的”
在想要删除文件中的最"套嵌"最里面的文件里,随便放入一个文件夹,这样再去删除,就会将该文件夹删除
mvc怎么单独引用css文件,关于asp.net mvc：如何在剃刀视图中引用.css文件？
我知道如何在layout.cshtml文件上设置.css文件,但是在每个视图的基础上应用样式表呢? 我在这里的想法是,在layout.cshtml中,您可以使用标记,但在非布局视图中不能这样做.标签在 ...
comtrade文件C语言,生成的comtrade.dat文件有关问题，波形分析软件打开看点是乱的...
生成的comtrade.dat文件问题,波形分析软件打开看点是乱的? 将连续的采样数据写成comtrade文件,数据类型是short int ,只有1个通道的数据,保证数据都没有问题(从波形看是正弦的 ...
java 读取css文件_如何用java解析css文件?
1.如何更换空间背景? 打开高级设置,再自定义CSS,看到里面的第3行和第4行都是 header div.lc{background:url(header div.lc{background:url ...