当前位置： 首页 > news >正文

webpack5入门教程

news 来源：原创 2024/5/18 21:57:40

Webpack入门

Webpack是什么

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler), 也就是个打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器运行了。

我们将 Webpack 输出的文件叫做 bundle。

在这里插入图片描述

为什么需要打包工具

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

一、基本使用

先创建项目，然后来到项目根目录

初始化package.json

npm init -y

此此时会生成一个基础的 package.json 文件。

安装webpack

在安装webpack之前，请确保本地环境安装了node.js, 尽量使用node新的长期支持的版本，旧版本可能遇到很多问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

npm install webpack --save-dev

如果使用 webpack 4+ 版本，还需要安装 CLI。

npm install webpack-cli --save-dev

webpack-cli - 此工具用于在命令行中运行 webpack

创建文件

在项目根目录创建src文件夹, 再创建index.js文件

  • index.js
function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

sum(2, 3, 5);

目录结构

webpack-course # 项目根目录（所有指令必须在这个目录运行）
    │── node_modules
    │── src # 项目源码目录
    |    └── index.js # 项目主文件
    |
    └── package-lock.json
    └── package.json

webpack打包

npx webpack ./src/index.js --mode=development

npx webpack: 是用于运行本地安装 Webpack 包

./src/index.js: 指定 Webpack 从 index.js 文件开始打包

--mode=development：指定打包模式

默认 Webpack 会将文件打包输出到 dist 目录下，如果自动创建了dist目录那就代表打包成功了

总结

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到其他资源就会报错

所以我们学习 Webpack，就是主要学习如何处理其他资源

二、核心概念

entry(入口)

指示 webpack 应该从哪个文件开始打包, 默认为./src/index.js

output(出口)

指示 webpack 应该将打包好的文件输出到哪个目录，以及文件命名等, 默认为./dist/main.js

loader

webpack 自身只理解 javascript, 而 loader 可以去处理那些非js的文件

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块, 然后就可以利用 webpack 的打包能力正常进行打包

plugins(插件)

plugins 用于扩展 webpack 功能，打包优化、压缩代码体积等

插件功能极其强大，可以用来处理各种各样的任务

想要使用一个插件，只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义

也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例

mode(打包模式)

两种模式：

  • 开发模式：development
  • 生产模式：production

三、基本配置

webpack配置文件

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

  • webpack.config.js的作用

    • webpack.config.js 是 webpack 的配置文件

    • webpack 在打包构建之前，会先读取这个配置文件, 从而基于给定的配置，再对项目进行打包

Webpack 是基于 Node.js 运行的，所以配置文件采用 Common.js 模块化规范

编辑配置文件

webpack.config.js

// Node.js的核心模块，用于处理文件路径
const path = require('path'); 

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'),  // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js'  // 输出文件的文件名
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        // 暂时只有js文件，现在用不着
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}

配置脚本命令

可以在package.json ---> scripts对象下面配置脚本

"scripts": {
	"build": "webpack" // script 节点下的脚本，可以通过npm run 执行。例如npm run build  就可以执行webpack这条命令了
}

运行脚本打包

npm run build

此时功能和前面一样，也不能处理样式资源

总结

Webpack 都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

四、处理样式资源

webpack 默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块webpack默认处理不了，需要调用loader才可以正常打包

loader的作用：协助webpack打包处理特定的文件模块

处理css资源

添加css资源

  • src/index.css
.box1 {
    width: 300px;
    height: 300px;
    background-color: red;
}

引入css资源

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);

// 引入 Css 资源，Webpack才会对其打包
import './index.css'

下载依赖

npm i css-loader style-loader --save-dev

loader介绍

  • css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader: 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path'); 

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'),  // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js'  // 输出文件的文件名
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}

test 表示匹配的文件类型

use 表示对应要调用的 loader

include 表示需要检查的目录

exclude 表示不需要检查的目录

  • 注意：

    • use数组中指定的loader顺序是固定的

    • 多个loader的调用顺序是：从后往前调用

      1. webpack 默认只能打包处理.js结尾的文件，处理不了其他后缀的文件
      2. 由于代码中包含了index.css这个文件，因此webpack默认处理不了
      3. 当webpack发现某个文件处理不了，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader。
      4. webpack把index.css这个文件，先转交给配置数组的最后一个loader进行处理（先转交给css-loader)
      5. 当css-loader处理完毕之后，会把处理的结果，转交给前一个loader（转交给style-loader)
      6. 当style-loader处理完毕后，发现前面没有loader了，于是就把处理的结果，转交给了webpack
      7. webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件。

打包

npm run build

查看效果

创建html模板文件

dist/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>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件 -->
    <script src="./bundle.js"></script>
</body>

</html>

效果

处理 less 和 sass/scss 资源

添加资源

  • src/index.less
#app {
    .box2 {
        height: 300px;
        width: 300px;
        background-color: aquamarine;
    }
}
  • src/index.scss
#app {
    .box3 {
        height: 300px;
        width: 300px;
        background-color: burlywood;
    }
}

引入资源

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);

// 引入 Css 资源，Webpack才会对其打包
import './index.css'
import './index.less'
import './index.scss'

下载依赖

npm i less-loader node-sass sass-loader --save-dev

loader介绍

  • less-loader: 负责将 Less 文件编译成 Css 文件
  • sass-loader: 负责将 Sass 文件编译成 css 文件
  • node-sass: sass-loader 依赖 node-sass 进行编译

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path'); 

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'),  // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js'  // 输出文件的文件名
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
        ]
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}

打包

npm run build

查看效果

dist/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>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div id="app">
        <div class="box2">less</div>
        <div class="box3">sacc/scss</div>
    </div>
    <!-- 引入打包后的js文件 -->
    <script src="./bundle.js"></script>
</body>

</html>

在这里插入图片描述

可以看到，less与sass/scss的语法已经被转换为css格式

五、处理图片资源

过去在 Webpack4 时，处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，只需要简单配置即可处理图片资源

添加图片资源

src/img/big.jpg - 50.26kb

src/img/small.png - 5.49kb

使用图片资源

  • src/index.scss
#app {
    .box3 {
        height: 300px;
        width: 300px;
        background-color: burlywood;
    }

    .box4 {
        width: 200px;
        height: 200px;
        background-image: url('./img/big.jpg');
        background-size: cover;
    }

    .box5 {
        width: 100px;
        height: 100px;
        background-image: url('./img/small.png');
        background-size: cover;
    }
}

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                  dataUrlCondition: {
                    maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                  }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            }
        ]
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}

打包

npm run build

查看效果

dist/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>
    <style>
        #app {
            display: flex;
        }
    </style>
</head>

<body>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div id="app">
        <div class="box2">less</div>
        <div class="box3">sacc/scss</div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
    <!-- 引入打包后的js文件 -->
    <script src="./bundle.js"></script>
</body>

</html>

在这里插入图片描述

查看资源目录

可以看到只有一张big.jpg打包后的图片文件，因为small.png的大小不足10kb以 data URI 形式内置到 js 中了

六、处理js资源

webpack默认处理了js资源, 为什么还要处理js资源

这是因为浏览器无法识别es6语法，webpack默认只对js进行打包，不会将es6语法转换为es5语法供浏览器使用，所以需要我们自己配置，使 es6 语法转换为浏览器能识别的 es5 语法

下载依赖包

npm i babel-loader @babel/core @bable/preset-env

准备es6资源

src/index.js

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);

// 添加es6语法
const string = () => {
  return '温情key'
}

console.log(string());;

// 引入 Css 资源，Webpack才会对其打包
import './index.css'
import './index.less'
import './index.scss'

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        // clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]  // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}

打包

npm run build

查看效果

配置前

在这里插入图片描述

配置后

在这里插入图片描述

可以看到箭头函数已经转换为了普通的命名函数

七、处理html资源

dist 目录属于构建目录，是我们源码的输出目录，我们希望里面的一切都是可以自动化的，包括 index.html 文件也能自动创建，js 文件也能自动引入到页面

所以我们需要用到插件 html-webpack-plugin

下载依赖

npm install html-webpack-plugin -D

添加模板文件

src/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>
    <style>
        #app {
            display: flex;
        }
    </style>
</head>

<body>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div id="app">
        <div class="box2">less</div>
        <div class="box3">sacc/scss</div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
    
</body>

</html>

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]  // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',  // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'),  // 模板文件的路径
            title: 'webpack-index'  // 生成页面的标题
        })
    ],
}

打包

npm run build

然后就可以看到dist目录下自动构建的html文件了。

八、开发服务器

在开发阶段，遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：

编写代码
控制台运行命令完成打包
打开页面查看效果

并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境

为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server

它既不是plugin也不是loader

接下来看看它怎么用

下载依赖

npm i webpack-dev-server -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]  // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',  // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'),  // 模板文件的路径
        })
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

配置命令

package.json

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
}

执行命令

npm run dev

当在使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

九、css方面优化

单独文件

css文件不处理会被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式

这样对于网站来说，可能会出现闪屏现象，用户体验不好

我们应该要使用单独的css文件，通过link标签加载提高用户体验

安装依赖

npm i mini-css-extract-plugin -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html', // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

打包

npm run build

打包成功后可以看到dist目录下static/css多出一个单独的css文件main.css

兼容性处理

因为css3样式需要加不同的浏览器前缀才能兼容对应的浏览器，因此在项目打包编译的时候，需要对css3属性进行统一的兼容性处理。

下载依赖

npm i postcss-loader postcss postcss-preset-env -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
    return [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              "postcss-preset-env", // 将package文件中的css兼容性样式引入进来
            ],
          },
        },
      },
      preProcessor,
    ].filter(Boolean);
  };

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: getStyleLoaders(),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: getStyleLoaders("less-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders("sass-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html', // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

兼容配置

package.json

"browserslist": [
    "> 1%",
    "last 2 versions"
]

配置兼容性前后对比

配置前

在这里插入图片描述

配置后

在这里插入图片描述

css压缩

压缩css代码体积

下载依赖

npm i css-minimizer-webpack-plugin -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
    return [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 将package文件中的css兼容性样式引入进来
                    ],
                },
            },
        },
        preProcessor,
    ].filter(Boolean);
};

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: getStyleLoaders(),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: getStyleLoaders("less-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders("sass-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html', // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
        // css压缩
        new CssMinimizerPlugin(),
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

打包

npm run build

可以看下打包后的css文件，配置css压缩前和配置css压缩后有很明显的变化

查看本系列文章合集click me

下载本系列文章源码click me

相关文章：

  • Python解决多个服务线程/进程重复运行定时任务的问题
  • webpack学习笔记
  • 01人机交互/打开CMD/常见CMD命令/CMD打开QQ并设置环境变量
  • QT汽车客运公司售票系统（改良版）
  • 初始Cpp之 六、内存分配
  • 【算法】重载sort的cmp的题
  • STC15单片机-LED闪烁(定时器)
  • Android 移动安全攻防实战 第一章
  • Docker 容器技术
  • 基于springboot的少儿识字系统
  • Hyperledger Besu环境搭建（Linux）
  • java毕业设计参考文献基于S2SH的仓库管理系统[包运行成功]
  • 基于51单片机8位竞赛抢答器_倒计时可调+LED跑马灯
  • 【教3妹学mysql】一条慢sql如何排查优化
  • 【JavaEE】进程与线程的创建
  • [NodeJS] 关于Buffer
  • bearychat的java client
  • co模块的前端实现
  • FastReport在线报表设计器工作原理
  • go append函数以及写入
  • Hibernate最全面试题
  • JS笔记四：作用域、变量（函数）提升
  • Python - 闭包Closure
  • Python_OOP
  • SAP云平台里Global Account和Sub Account的关系
  • Vim 折腾记
  • Vue.js-Day01
  • 互联网大裁员：Java程序员失工作，焉知不能进ali？
  • 聊聊sentinel的DegradeSlot
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 区块链共识机制优缺点对比都是什么
  • 如何将自己的网站分享到QQ空间，微信，微博等等
  • 如何进阶一名有竞争力的程序员?
  • 十年未变！安全，谁之责？（下）
  • 算法-图和图算法
  • 微信小程序开发问题汇总
  • 译米田引理
  • ​如何使用ArcGIS Pro制作渐变河流效果
  • #图像处理
  • (06)Hive——正则表达式
  • （4）事件处理——（2）在页面加载的时候执行任务（Performing tasks on page load）...
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (floyd+补集) poj 3275
  • （动态规划）5. 最长回文子串 java解决
  • （独孤九剑）--文件系统
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • （教学思路 C#之类三）方法参数类型（ref、out、parmas）
  • （五）c52学习之旅-静态数码管
  • （一）使用IDEA创建Maven项目和Maven使用入门（配图详解）
  • ***通过什么方式***网吧
  • . NET自动找可写目录
  • .NET Core 通过 Ef Core 操作 Mysql
  • .NET Entity FrameWork 总结 ，在项目中用处个人感觉不大。适合初级用用，不涉及到与数据库通信。
  • .NET 材料检测系统崩溃分析