【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 = i1let 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 /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文件