前端篇-webpack二{实现css，img等静态资源打包} --1

轻动琴弦

已于 2022-04-18 21:27:31 修改

阅读量906

点赞数 1

分类专栏： js webpack html5 文章标签：前端 javascript webpack

于 2022-04-11 22:58:04 首次发布

本文链接：https://blog.csdn.net/hacker12356/article/details/124027707

版权

js 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

webpack

4 篇文章 0 订阅

订阅专栏

前端篇-webpack二{实现css，img等静态资源打包} --1

打包css、less
打包html
依赖版本
配置
- 打包后的html文件
图片打包
- 配置
- 输出
版本合集

打包css、less

需要单独配 module中的rules

	 //loader配置
    module: {
        rules: [
            //详细的loader配置
            //不同文件配置不同loader
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader
                use: [
                    //use数组中执行的顺序。从右到左 从下到上
                    //2.创建style标签将js中css样式资源插入，添加到页面中生效
                    'style-loader',
                    //1.将css文件编程commonjs模块加载到js中，内容是样式字符串
                    'css-loader'
                ]
            },
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader
                use: [
                    //use数组中执行的顺序。从右到左 从下到上
                    //2.创建style标签将js中css样式资源插入，添加到页面中生效
                    'style-loader',
                    //1.将css文件编程commonjs模块加载到js中，内容是样式字符串
                    'css-loader',
                    //将less文件编译为css文件
                    //需要less-loader 和less 依赖
                    'less-loader'
                ]
            }
        ]
    },

注意版本，有可能版本过高不兼容，报 this.getOptions is not a function 错误

依赖版本

 "devDependencies": {
    "css-loader": "^5.0.1",
    "less-loader": "^5.0.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^4.9.2"
  }

正常设置webpack.config.js

/**
 * //webpack配置文件
 * 指示webpack做哪些事情
 * 所有构建工具都是基于nodejs执行，  所以模块化采用comminjs
 */
const { resolve } = require("path");
module.exports = {
    //webpack配置
    //入口起点
    entry: './src/index.js',
    //输出
    output: {
        filename: 'main.js',
        //__dirname nodejs变量 代表当前文件目录绝对路径
        path: resolve(__dirname, "build")
    },
    //loader配置
    module: {
        rules: [
            //详细的loader配置
            //不同文件配置不同loader
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader
                use: [
                    //use数组中执行的顺序。从右到左 从下到上
                    //2.创建style标签将js中css样式资源插入，添加到页面中生效
                    'style-loader',
                    //1.将css文件编程commonjs模块加载到js中，内容是样式字符串
                    'css-loader'
                ]
            },
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader
                use: [
                    //use数组中执行的顺序。从右到左 从下到上
                    //2.创建style标签将js中css样式资源插入，添加到页面中生效
                    'style-loader',
                    //1.将css文件编程commonjs模块加载到js中，内容是样式字符串
                    'css-loader',
                    //将less文件编译为css文件
                    //需要less-loader 和less 依赖
                    'less-loader'
                ]
            }
        ]
    },
    //plugins插件
    plugins: [
        //详细
    ],
    //模式
    mode: 'development',//开发模式
    // mode: 'production'
}

打包html

依赖版本

"html-webpack-plugin": "^4.4.1",

配置


/**
 * loader: 1下载 2使用
 * plugins ：1 下载 2 引用 3 使用
 **/

const { resolve } = require('path');

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // loader配置

        ]
    },
    plugins: [
        //plugins
        // "html-webpack-plugin": "^5.5.0",
        //默认创建一个空html，并引用entry文件
        //需要有结构的html、
        new HtmlWebpackPlugin({
            //创建一个html文件
            //自动打包文件到html中
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

打包后的html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="title">title</div>
<script src="built.js"></script></body>
</html>

会自动引入打包的资源，无需手动引入

图片打包

配置

配置
const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [{
            test: /\.less$/,
            //数组代表使用多个loader
            use: [
                'style-loader', 'css-loader', 'less-loader'
            ],

        }
            //处理图片
            //！默认处理不了html中的图片 <img src="./img/BM.jpg" alt=""> 打包后路径不会改变！
            , {
            test: /\.(jpg|png|gif)$/,
            //只用一个loader  但要下载url-loader 和 file-loader
            loader: 'url-loader', // 处理样式中的url
            options: {
                //当图片小于8k 会被base64处理
                //减少请求数量
                //图片体积会变大，文件请求更慢  
                limit: 8 * 1024,
                //默认使用的是es6模块化，而html-loader使用的是commonjs模块化
                //解析时就会报错
                // 解决，关闭es6模块化，使用commonjs
                esModule: false,
                //图片名字重命名
                //[hash:10]  hash 值前10位
                //[ext]  原拓展名
                name: '[hash:5].[ext]'
            }
        },
        {
            //使用的是commonjs模块化
            test: /\.html$/,
            //处理html中img的图片 （引入img图片，就能被url-loader进行处理）
            loader: 'html-loader'
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
    // mode: 'production'
}

#bos1 {
    width            : 100px;
    height           : 100px;
    background-image : url("./img/BM.jpg");
    background-size  : 100% 100%;
    background-repeat: no-repeat;
}

#bos2 {
    width            : 200px;
    height           : 200px;
    background-image : url("./img/2.png");
    background-size  : 100% 100%;
    background-repeat: no-repeat;
}

#bos1 {
    width            : 100px;
    height           : 100px;
    background-image : url("./img/1.png");
    background-size  : 100% 100%;
    background-repeat: no-repeat;
}

输出

在这里插入图片描述

版本合集

@babel/core": “^7.8.4”,
“@babel/polyfill”: “^7.8.3”,
“@babel/preset-env”: “^7.8.4”,
“add-asset-html-webpack-plugin”: “^3.1.3”,
“babel”: “^6.23.0”,
“babel-loader”: “^8.0.6”,
“core-js”: “^3.6.4”,
“css-loader”: “^3.4.2”,
“eslint”: “^6.8.0”,
“eslint-config-airbnb-base”: “^14.0.0”,
“eslint-loader”: “^3.0.3”,
“eslint-plugin-import”: “^2.20.1”,
“file-loader”: “^5.0.2”,
“html-loader”: “^0.5.5”,
“html-webpack-plugin”: “^3.2.0”,
“less”: “^3.11.1”,
“less-loader”: “^5.0.0”,
“mini-css-extract-plugin”: “^0.9.0”,
“optimize-css-assets-webpack-plugin”: “^5.0.3”,
“postcss-loader”: “^3.0.0”,
“postcss-preset-env”: “^6.7.0”,
“style-loader”: “^1.1.3”,
“terser-webpack-plugin”: “^2.3.5”,
“thread-loader”: “^2.1.3”,
“url-loader”: “^3.0.0”,

//这3个可以用
 "webpack": "^5.2.0",
    "webpack-cli": "^3.2.12",
    "webpack-dev-server": "^3.11.0"
“

webpack”: “^4.41.6”,
“webpack-cli”: “^3.3.11”,  3.2.1
“webpack-dev-server”: “^3.10.3”,  2.9.7更好
“workbox-webpack-plugin”: “^5.0.0”