Webpack5的基本配置及资源处理

一、准备Webpack配置文件

在项目根目录下创建文件：webpack.config.js

const path = require('path') //node.js核心模块，专门用来处理路径问题

module.exports = {
    // 入口
    entry: './src/main.js', //相对路径
    // 输出
    output: {
        // __dirname为node.js的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname,'dist'),  //绝对路径
        //入口文件打包输出文件名
        filename: "static/js/main.js"
    },
    // 加载器
    module: {
        rules: []
    },
    // 插件
    plugins: [],
    // 模式
    mode: "development" // development为开发模式，production为生产模式
}

自动清空上次打包的内容 不需要手动删除之前打包的文件，实现自动覆盖的效果

output: {
    //自动清空上次打包的内容（原理：在打包前，将path整个目录内容清空，再进行打包）
    clean: true
},

二、使用webpack处理资源

1. 处理js资源

因为Webpack本身是能够处理js及json资源的，不需要配置loader和plugins

在项目下新建src目录，并创建js文件夹及js文件，这里以计算两数之和为例：

sum.js :

export default function sum(x,y) {
    return x+y;
}

在src目录下创建main.js文件，并引入sum.js （想要webpack打包资源，就必须引入该资源）

main.js :

import count from './js/count'

console.log(count(1,2))

使用npx webpack命令进行打包，可以看到js代码已经成功执行了。

2. 处理样式资源

使用Webpack处理css、less、sass、scss、styl样式资源

Ⅰ 处理css资源

a. 下载包：

npm i css-loader style-loader -D 需要下载这两个loader

b. 功能介绍：

css-loader: 将css文件编译成webpack能识别的模块

style-loader: 会动态创建一个style标签，用于放置webpack中css模块的内容

c. 创建css资源并引入：

在public/index.html中创建5个box，分别命名为box1～5:

在src目录下创建css文件夹和css文件：

.box1{
    width: 100px;
    height: 100px;
    background-image: url("../img/1.png");
    background-size: cover;
}

在main.js中引入刚刚创建的css文件index.css

//引入css资源（想要webpack打包资源，就必须引入该资源）
import '../src/css/index.css'

d. 配置loader：

在webpack.config.js中进行样式loader配置

// 加载器
module: {
    rules: [
        // loader的配置
        // 处理css资源的loader配置
        {
            test: /.css$/,  //只检测css类型的文件（只有.css结尾的文件才使用下方的规则对它做处理）
            use: [ //use执行顺序：从右到左或从下到上
                'style-loader', //将js中的css通过创建style标签添加到html文件中以生效
                'css-loader'  //将css资源编译成commonjs的模块打包到js中
            ]
        }
     ]
 }

详细教程可参考官方文档 css-loader、 style-loader

完成上述步骤后，使用npx webpack命令进行重新打包，可以看到效果：

Ⅱ 处理less资源

a. 创建less资源

在src目录下创建less文件夹和less文件：

.box2{
  width: 100px;
  height: 100px;
  background-image: url("../img/2.png");
  background-size: cover;
}

b. 引入less资源至js中 （main.js）

//引入less资源
import '../src/less/index.less'

c. 下载：npm i less less-loader -D （既要下载less也要下载less-loader）

d. 配置loader：less-loader

// 加载器
module: {
    rules: [
        {
            // 处理less资源的loader配置
            test: /.less$/,
            // loader: "xxx",  使用loader配置只能使用一个loader，如需使用多个，则用use
            use: [
                //使用多个loader
                'style-loader',
                'css-loader',
                'less-loader'  //将less编译成css文件
            ]
        }
    ]
}

详细教程可参考官方文档 less-loader

完成上述步骤后，使用npx webpack命令进行重新打包，可以看到效果：

Ⅲ 处理sass/scss资源

步骤与处理less资源类似，这里就不重复说明了😄

a. 创建sass/scss资源

b. 引入less资源至js中 （main.js）

c. 下载：npm i sass sass-loader -D （既要下载sass也要下载sass-loader）

d. 配置loader：sass-loader

// 加载器
module: {
    rules: [
        // 处理sass(scss)资源的loader配置
        {
            test: /.s[ac]ss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'  //将sass编译成css文件
            ]
        }
    ]
}

详细教程可参考官方文档 sass-loader

完成上述步骤后，使用npx webpack命令进行重新打包

Ⅳ 处理stylus资源

步骤与处理less、sass资源类似，这里就不重复说明了😄

a. 创建stylus资源

b. 引入stylus资源至js中 （main.js）

c. 下载：npm i stylus stylus-loader -D （既要下载stylus也要下载stylus-loader）

d. 配置loader：stylus-loader

// 加载器
module: {
    rules: [
        // 处理stylus资源的loader配置
        {
            test: /.styl$/,
            use: [
                'style-loader',
                'css-loader',
                'stylus-loader'  //将stylus编译成css文件
            ]
        }
    ]
}

详细教程可参考官方文档 stylus-loader

完成上述步骤后，使用npx webpack命令进行重新打包

3. 处理图片资源

在Webpack4，处理图片资源需要通过file-loader和url-loader进行处理。

url-loader：处理图片资源，但是默认处理不了html中的img图片，需要借助html-loader。配置limit决定图片大小小于多少时转base64格式。

file-loader：url-loader需要依赖file-loader来处理图片资源

现Webpack5已经将这两个loader内置到Webpack里了，只需要简单配置就可以处理图片资源了。

// 处理图片资源的loader配置
{
    test: /.(png|jpe?g|gif|webp|svg)$/,
    type: "asset",
    parser: {
        dataUrlCondition:{
            // 小于10kb的图片转base64
            // 优点：减少请求数量   缺点：体积会更大一点
            maxSize: 10 * 1024  //10kb
        }
    }
},

配置完成后，内存大小小于10kb的图片已经转为base64格式

图片为什么要转base64格式？

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址

1. 提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。

2. 加密: 让用户一眼看不出图片内容 , 只能看到编码。

3. 方便引用: 在多个文件同时使用某些图片时, 可以把图片转为base64格式的文件, 把样式放在全局中, 比如common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率

原文链接：blog.csdn.net/yiguang_820…

自定义输出文件名

默认情况下，asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。

可以通过在 webpack 配置中设置 output.assetModuleFilename 来修改此模板字符串

//设置图片文件输出目录
    generator: {
        // 输出图片名称
        // hash:7 代表文件名称只取前7位
        filename: 'static/images/[hash:7][ext][query]'
    }
    

自定义前： 自定义后：

4. 处理html资源

处理html资源首先需要下载插件HtmlWebpackPlugin

Ⅰ 安装：

npm install --save-dev html-webpack-plugin

Ⅱ 引入HtmlWebpackPlugin：

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

Ⅲ 配置插件：

// 插件
plugins: [
    // plugins的配置
    // 处理html资源
    new HtmlWebpackPlugin({
        // 模版：以public/index.html文件为模版，创建新的html文件
        // 新的html文件特点： 1.结构和原来一致  2.自动引入打包输出的资源
        template: path.resolve(__dirname,'public/index.html')
    })
],

配置完成后，html文件中不需要手动引入js文件，Webpack在打包时会自动引入

配置HtmlWebpackPlugin前：

配置HtmlWebpackPlugin后： 打包后会自动加上这一行引入代码

defer属性表示脚本在执行的时候不会改变页面的结构，也就是说脚本会被延迟到整个页面都解析运行完毕后再运行。

因此，在script标签设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

5. 处理字体、视音频等资源

Ⅰ 下载字体图标文件：

1. 打开阿里巴巴矢量图标库（iconfont）
2. 将所选图标下载到本地

打开iconfont.css文件，需要注意字体文件的引用地址是否正确

Ⅱ 引入字体图标文件（main.js）：

//引入iconfont
import '../src/css/iconfont.css'

这时候执行npx webpack进行打包，会看到以下效果：

打包后的文件是在最外层，且文件名有一点长

Ⅲ 配置loader（设置字体文件/视音频输出目录）：

// 处理字体、视音频等资源的loader配置
{
    test: /.(ttf|woff2?|mp3|mp4|avi)$/,
    type: "asset/resource", // 只会对文件原封不动的输出，不会转为base64格式
    //设置字体文件/视音频输出目录
    generator: {
        // 输出字体/视音频名称
        filename: 'static/media/[hash:7][ext][query]'
    }
},

执行npx webpack进行重新打包后效果：

可以看到文件已经按照指定规则显示了。