webpack中处理图片

参考

file-loader
url-loader
webpac3.x成神之路

file-loader & url-loader

• file-loader
  解决CSS等中引入图片的路径问题；(解决通过url,import/require()等引入图片的问题)

file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用的路径，使之指向正确的文件。

• url-loader
  当图片小于设置的limit参数值时，url-loader将图片进行base64编码(当项目中有很多图片，通过url-loader进行base64编码后会减少http请求数量，提高性能)，大于limit参数值，则使用file-loader拷贝图片并输出到编译目录中；

配置

1.创建本地项目webpack-demo

mkdir webpack-demo
cd webpack-demo

2.在webpack-demo的根目录下创建package.json文件

npm init -y

3. 安装webpack依赖包

npm i webpack webpack-cli webpack-dev-server --save-dev

模块说明：

• webpack
webpack核心

• webpack-cli
webpack的脚手架（启动器）

• webpack-dev-server
  开发环境下用于实时加载依赖

4.修改package.json文件的scripts属性值,进行打包资源的配置

"scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },

5.安装相关的loader

npm install file-loader url-loader --save-dev

6.在webpack.config.js中配置

const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 输出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分离css代码
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js'
  },
  devServer: {
    baseContent: path.resolve(__dirname, '../dist'),// 静态资源根目录
    host: 'localhost',//服务器IP地址，默认是localhsot
    port: 5527,//服务监听的端口号
    compress: true,// 是否开启服务端压缩（gzip）
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {loader: 'babel-loader'}
        ]
      },
      {
        test: /\.css$/,
        use: [
          // {
          //   loader: 'style-loader',
          //   options: {
          //     singleton: true,// 单独的style
          //   }
          // },
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          // {
          //   loader: 'style-loader'
          // },
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          // {
          //   loader: 'style-loader'
          // },
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'images/',// 输出目录
              name(file) {// 输出名称
                if(process.env.NODE_ENV === 'development') {
                  return '[path][name].[ext]'
                }
                return '[hansh].[ext]'
              },
              limit: 5*1024
            }
          }
        ]
      },
      {
        test: /\.(eot|woff2?|ttf|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            name: '[name]-[hash:5].min.[ext]',
            limit: 5000,
            publicPath: '../static/fonts/',
            outputPath: 'fonts/'
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack Study Demo',
      filename: 'index.html',//指定生成的HTML文件名
      template: path.join(__dirname, '../public/index.html') // 指定模板路径
    }),
    new ProgressBarPlugin({
      format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
      clear: false
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',// 分离后的文件名
      chunkFilename: '[id].css',//
      ignoreOrder: false
    })
  ]
}

7.运行命令

npm run build

8.结果展示

9.运行命令

npm run dev

10.结果展示

• 注意
  使用url-loader通常用于处理css中的图片;

处理html中的图片可以使用html-withimg-loader

html-withimg-loader处理html中的图片

1.安装

npm install html-withimg-loader --save

2.在webpack.config.js中进行配置

{
       test: /\.(htm?l)/i,
       use: {loader: 'html-withimg-loader'}
},

3.执行命令

npm run dev

4.执行命令

npm run dev

5.结果展示