(04)webpack 图片配置

webpack图片处理需要下载

npm i file-loader html-loader url-loader -D

文件目录
在这里插入图片描述

less文件

div {
  background-color: pink;
  color:#fff
}

.div1 {
  background-image: url(./成都画室1.png);
  width: 100px;
  height:100px;
  background-size: contain;
}

.div2 {
  background-image: url(./黑暗森林\ ¹\ 幻想艺术\ 唯美意境3440x1440壁纸_彼岸图网.jpg);
  width: 100px;
  height:100px;
  background-size: contain;
}

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">dx好帅</div>
    <div class="div2">dx好帅</div>
    /** 直接引入的图片无法成功打包,需要在webpack.config中另外配置 */
    <img src="./成都画室1.png" alt="">
  </body>
</html>

webpack.config.js

const { resolve } = require('path');
/** 引入插件 */
const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));

module.exports = {
  /** 输入 */
  entry: './src/index.js',
  /** 输出 */
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'bundle'),
    publicPath:''
  },
  /** loader 配置 1下载 2使用(配置loader) */
  module: {
    rules: [
      {
        /** 对所有以.css结尾的文件进行匹配 */
        test: /\.css$/,
        /** use执行顺序, 从右往左,从下往上 */
        use: [
          /** 创建一个style标签, 将js中的css样式资源插入进去,添加到页面生效 */
          // 'style-loader',
          /** 将css文件编程commonjs模块加载js中,里面内容是样式字符串 */
          // 'css-loader',
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
          },
        ],
      },
      {
        /** 对所有以.css结尾的文件进行匹配 */
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.scss/, //配置sass转css
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ],
      },
      {
        /** webpack 处理图片的的配置,
         * 缺点 没办法处理html中直接引入的图片
         */
        test: /\.(jpg|jpge|png|gif)$/,
        /** 当只需要用loader时可以这样写,需要下载两个包 url-loader file-loader
         * 因为url-loader 依赖于 file-loader
         *  */
        loader: 'url-loader',
        /** options可以配置图片处理的情况 */
        options: {
          /** limit 限制8kb一下的图片转为base64
           * 优点 图片转为base64以后,加载图片不再需要请求服务器,减轻服务器压力
           * 缺点 图片转为base64会造成图片体积变大的问题,因此本身太大的图片不适合转为base64
           * */
          limit: 8 * 1024,
          /** 将处理后的图片命名规则,hash:10 指的是命名hash保留10位,ext保留原有的后缀名 */
          name: [hash:10].[ext],
          /** 关闭es6模块 */
          //esModule:false
        },
      },
      {
        /** 为了弥补html中直接引入的图片无法打包的问题,使用html-loader, */ 
        test: /\.html$/,
        loader: 'html-loader'
      }
    ],
  },
  /** 插件配置 1下载 2引入 3使用 */
  plugins: [
    /** 可以多次使用,生成多个html文件 */
    new HtmlWebpackPlugin(),
    /** 插件实现的功能 默认会创建一个空的html,自动引入打包输出的所有资源 */
    new HtmlWebpackPlugin({
      /** 将路径的html复制一份,自动引入打包输出的所有资源  */
      template: './src/index.html',
      // alwaysWriteToDisk: true,
      /** 创建的html的名字,如果不设置默认为index.html */
      filename: 'text.html',
      title: 'dx',
    }),
  ],
  /** 模式开发模式 development  或者生产模式 production */
  mode: 'development',
};

实现效果
在这里插入图片描述

ps: 我在webpack.config.js配置的过程中,outPut一开始没有publicPath:’'字段,导致报错

Error: Automatic publicPath is not supported in this browser

输出非正常的html文件

Html Webpack Plugin:
<pre>
  Error: C:\Users\ibaiwei\Desktop\webpack\webpack打包样式资源\src\index.html:136
  /******/  if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
                            ^
  Error: Automatic publicPath is not supported in this browser
  
  - index.html:136 
    C:/Users/ibaiwei/Desktop/webpack/webpack打包样式资源/src/index.html:136:34
  
  - index.html:139 
    C:/Users/ibaiwei/Desktop/webpack/webpack打包样式资源/src/index.html:139:13
  
  - index.html:146 
    C:/Users/ibaiwei/Desktop/webpack/webpack打包样式资源/src/index.html:146:12
  
  - index.js:121 HtmlWebpackPlugin.evaluateCompilationResult
    [webpack打包样式资源]/[_html-webpack-plugin@5.0.0-alpha.6@html-webpack-plugin]/index.js:121:28
  
  - index.js:297 
    [webpack打包样式资源]/[_html-webpack-plugin@5.0.0-alpha.6@html-webpack-plugin]/index.js:297:26
  
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5
  
  - async Promise.all
  
  - async Promise.all
  
</pre>

解决的方法:
在webpack.config.js中的output中添加publicPath:‘打包后img文件的路径’

其他问题
在webpack之前的版本中,使用html-loader,解析的img可能会异常
url-loader默认使用es6 而html-loader引入的图片是commonJS,无法被url-loader正确识别,

解决的办法:关闭url-loader使用的es6模块
给url-loader加一个配置项
esModule:false

  {
    /** webpack 处理图片的的配置,
     * 缺点 没办法处理html中直接引入的图片
     */
    test: /\.(jpg|jpge|png|gif)$/,
    /** 当只需要用loader时可以这样写,需要下载两个包 url-loader file-loader
     * 因为url-loader 依赖于 file-loader
     *  */
    loader: 'url-loader',
    /** options可以配置图片处理的情况 */
    options: {
      /** limit 限制8kb一下的图片转为base64
       * 优点 图片转为base64以后,加载图片不再需要请求服务器,减轻服务器压力
       * 缺点 图片转为base64会造成图片体积变大的问题,因此本身太大的图片不适合转为base64
       * */
      limit: 8 * 1024,
      /** 在之前的版本中,现在已经修复 url-loader默认使用es6 
       而html-loader引入的图片是commonJS,无法被url-loader正确识别,
       * 用于关闭url-loader的es6模块 */ 
       esModule: false
    },
  },
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页