webpack4打包css中引用的图片

╰半夏微凉° 2022-05-19 08:23 280阅读 0赞

使用file-loader和url-loader

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

配置文件：

const path = require("path");
    const uglifyjs = require('uglifyjs-webpack-plugin'); //压缩js插件
    const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html插件
    const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //打包css插件
    module.exports = {
        mode: "development", //打包为开发模式
        entry: "./src/js/main", //入口文件,从项目根目录指定
        output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "main.js" 
        },
        module: {
          rules:[
            //打包css的图片，图片大小小于limit设置的8192B的会转化成base字符串引入，减少请求
            {
              test: /\.(png|jpg|gif|jpeg)$/,
                  use: [
                    {
                      loader: 'url-loader',
                      options: {
                        limit:8192,
                        outputPath:'../img/'
                      }
                    }
                  ]
            },
            {
              test: /\.css$/,
              use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                      minimize: true
                    }
                },
              ]
            }
          ]
        },  
      plugins: [
      	new HtmlWebpackPlugin({
    	    title: 'Custom template',
    	    template: './src/index.html', //指定要打包的html路径和文件名
    	    filename:'../index.html' //指定输出路径和文件名
    	  }),
        new uglifyjs(),
        new MiniCssExtractPlugin({
          filename: "../css/styles.css" //如果需要将css文件单独放入css文件夹中需要../
        })
      ]
    }

最终输出目录：

![70][]

[70]: /images/20220519/334e1b5492274a8ca671f0be88de09a2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 打包图片资源

webpack 打包图片资源 / loader: 1. 下载 2. 使用（配置） plugins：1. 下载 2. 引入 3.使用

野性酷女/ 2023年01月09日 03:54/ 0 赞/ 190 阅读

相关 webpack打包图片资源说明

npm run build打包后，一些图是转为base64了，一些是在static/img文件夹。路径问题： 1、直接<img :src=''>引用修改方法：首先修改

亦凉/ 2022年06月01日 02:07/ 0 赞/ 294 阅读

相关 webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步

朴灿烈づ我的快乐病毒、/ 2022年05月28日 00:39/ 0 赞/ 327 阅读

相关 webpack4打包css中引用的图片

使用file-loader和url-loader npm install --save-dev file-loader url-loader 配置文件：

╰半夏微凉°/ 2022年05月19日 08:23/ 0 赞/ 281 阅读

相关 webpack4打包多个css的两种方法

demo目录： ![70][] 1.将css打包到js内部配置文件./conf/webpack.dev.js: const path = require("p

桃扇骨/ 2022年05月19日 03:23/ 0 赞/ 582 阅读

相关 Webpack打包css

1、编写src/css/main.css ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

太过爱你忘了你带给我的痛/ 2022年04月06日 08:08/ 0 赞/ 363 阅读

相关 webpack4 单独抽离打包 css 的新实现

webpack4 单独抽离打包 css 的新实现前言 > 之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进入口 js 文件中；② 使用第三方

红太狼/ 2022年03月27日 07:12/ 0 赞/ 311 阅读

相关 webpack4 css打包压缩问题

这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可

谁借莪１个温暖的怀抱￠/ 2022年02月27日 04:10/ 0 赞/ 349 阅读

相关 webpack4 打包图片

1、下载 cnpm install url-loader file-loader html-loader@0.5.5 -D 其中url-loader

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:24/ 0 赞/ 485 阅读

相关 webpack3 打包css、less和图片

css 处理 1、在主入口文件引入写好的css文件 import 'css路径' 2、安装css相关依赖

怼烎@/ 2021年07月24日 17:27/ 0 赞/ 462 阅读