这一节我们主要讲Webpack怎么样打包资源
这是第一节内容

1.打包css/less等样式资源

1.1创建文件夹

创建两个文件夹和一个文件(webpack.config.js)
src:存放源代码
build:存放打包处理好的代码
webpack.config.js:这个文件是webpack的配置文件;指示webpack干哪些活;当运行webpack指令时 会加载里面的配置
在这里插入图片描述

1.2安装插件

npm i css-loader -D      //  打包css的安装命令
npm i style-loader -D    //打包样式的安装命令
npm i less-loader -D   //打包less的安装命令
npm i less -D               //打包less的安装命令

1.3编写代码

src文件夹里创建三个文件(可参考我下方的代码)
同级目录创建一个webpack.config.js文件

build目录下创建index.html文件

index.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>
    <h1 class="pq">我是刘港辉</h1>
    <p>hello world</p>
        <!--  引入打包好的built文件 -->
    <script src="./built.js"></script>     
</body>

</html>

.css文件

body {
    background-color: #ff8500;
}

.less文件

.pq{
    color: blue;     //类为pq的样式
}

.js文件

// 引入样式资源
import './index.css'
// 引入less资源
import './index.less'

webpack.config.js文件

/*
    这个文件是webpack的配置文件
    作用:指示webpack干哪些活;当运行webpack指令时 会加载里面的配置
*/

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

module.exports = {
    //webpack配置

    //入口起点,要把哪里的文件打包出去
    entry: './src/index.js',
    //输出;要打包到哪里
    output: {
        //输出文件的文件名
        filename: 'built.js',
        //输出文件的路径
        path: resolve(__dirname, 'build')   //__dirname   node.js的变量;代表当前文件的目录绝对路径
    },
    //loader的配置
    module: {
        rules: [{
                // 匹配哪些文件
                test: /\.css$/,   //正则语法,代表要匹配所有后缀为.css的文件
                // 使用哪些loader处理
                use: [
                    // 创建style标签——将js中的样式资源插入——添加到head中生效
                    'style-loader',
                    // 将css文件变成common js模块加载到js中,里面的内容就是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'         //这个是less样式的打包
                ]
            }
        ]
    },
    //plugins的配置
    plugins: [],
    //模式
    mode: 'development'       //开发模式
}

1.4输出

在此文件终端下打开并输入webpack命令

1.5结果

打开会发现样式被引入了

在这里插入图片描述

讲一下基本渲染流程
src文件夹里面创建了一个index.js文件,这个js文件里面引入了css和less一些基本样式,将这个js文件打包到指定build文件夹里的built.js文件里,再在build文件夹里创建了一个index.html这个文件,引入已经被打包好的js文件,样式就被引入进去了
如果不明白可以看这里

2.打包HTML资源

和上面流程一样

2.1编写文件

src目录下的 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>
    <style>

    </style>
</head>

<body>
    <h1>hello 刘港辉</h1>

</body>

</html>

src目录下的 js文件

function add(a, b) {
    return a + b;
}
console.log(add(3, 4));

2.2安装插件

npm i html-webpack-plugin

与上面不同的是,这个插件需要手动引入到webpack.config.js文件里面

const HtmlWebpackPlugin = require('html-webpack-plugin')

2.3webpack.config.js文件

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: []
    },
    plugins: [
        // html-webpack-plugin
        // 默认会创建一个空的html,自动引入打包输出的所有资源(js/css)
        // 需求:需要有结构的html文件
        new HtmlWebpackPlugin({
            // 复制‘./src/index.html’文件 ,并自动引入打包输出的所有资源(js/css)
            template: './src/index.html'
        })
    ]
}

2.4执行命令

运行命令webpack

2.5结果

打开build文件;会发现里面多了html文件,打开会发现他自动引入了js文件

在这里插入图片描述

3.打包图片资源

先给src里面插入几张图片和一些基础样式
在webpack.config.js里面输入以下命令

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 class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <img src="./0.png" alt="">
    <img src="./1.png" alt="">
</body>

</html>

js引入样式文件

import './index.less'

less文件

.box1{
    width: 200px;
    height: 200px;
    background-image: url(./0.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.box1{
    width: 200px;
    height: 200px;
    background-image: url(./1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}
.box1{
    width: 200px;
    height: 200px;
    background-image: url(./160.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

webpack.config.js文件

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$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            //处理图片资源
 			{
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                loader: 'url-loader',
                options: {
                    // 图片会大于8kb,会被base64处理  减少请求数量(减轻服务器压力) 图片体积会更大(文件请求数量慢)
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',  // hash值的前十位 [ext]表示取文件原来的扩展名
                    outputPath: 'img',   // 输出到img
                },
 			},

            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}
运行命令会发现系统自动将图片压缩成比较长的字符名称放置到build文件夹里

4.打包字体图标资源

引入字体图标

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>
    <span class="icon-minsu"></span>
    <span class="icon-zijiayou"></span>
    <span class="icon-xiangji"></span>
    <span class="icon-hanglixiang"></span>
</body>

</html>

js文件引入iconfont文件

webpack.config.js
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: /\.css$/,
                use: ['style-loader', 'css-loader']
            },

            // 打包其他资源(排除js/css/html)
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                loader: 'file-loader',
                options: {
                    outputPath: 'font/' //指定这些文件打包后的目录
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

运行即可

观看第一节基础教程点击这里

更多精彩内容点击这里