[JavaScript知识库]【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: [{
          // 具体使用的loader
          loader: '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插件的loader
        use: [MiniCssExtractPlugin.loader, 'css-loader']
},

• 在plugins配置项中引用插件

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

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