webpack（上）

最新推荐文章于 2024-05-16 09:55:01 发布

蒙面大婶l

最新推荐文章于 2024-05-16 09:55:01 发布

阅读量1.5k

点赞数 37

文章标签： webpack 前端 javascript css

本文链接：https://blog.csdn.net/mengxiaodi/article/details/135016984

版权

3.1、命令式使用webpack（不常用）

一、webpack简介

webpack 是一个流行的开源前端模块打包工具，它通过将各种静态资源（如JavaScript、CSS、HTML、图片等）视为模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并基于这些模块生成优化后的静态文件（通常是一个或多bundle）。这些bundle可以被浏览器直接使用，从而提高网页的加载速度和运行效率。

二、webpack的核心功能

模块打包：Webpack 可以将多个模块（包括 JavaScript、CSS、图片等）打包成一个或多个文件。这有助于减少浏览器加载的文件数量，从而提高加载速度。
依赖管理：它能够管理模块之间的依赖关系，确保在浏览器中以正确的顺序加载模块。
代码分割：Webpack 允许将代码分成多个块，可以按需加载，从而提高应用的性能。
资源优化：Webpack 可以对资源文件（如图片、字体等）进行压缩、打包，减少文件大小，提高加载速度。
开发效率：Webpack 支持热模块替换（Hot Module Replacement，HMR）等功能，可以在不重新加载整个页面的情况下，实时更新模块，提高开发效率。
插件系统：Webpack 具有丰富的插件生态系统，这些插件可以用于执行各种任务，如打包优化、资源管理和环境变量注入等。
加载器（Loaders）：Loaders 允许你预处理模块，如转换 ES6 代码、处理 CSS 预处理器文件等，使其能够被浏览器解析。
配置灵活性：Webpack 允许你通过配置文件（webpack.config.js）定制化打包过程，包括入口点、输出目录、加载器和插件等。

三、webpack的使用和安装

1、初始化项目

新建一个webpack项目，先在集成终端用 npm init -y 命令创建package.json文件，然后再分别创建其他文件和文件夹，如图所示：

package.json：是JS中的一个配置文件，通过package.json文件可以方便的管理项目的依赖关系，以及项目的配置信息。

其他文件的内容如下：

index.html的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack5</title>
</head>
    <script src="./src/app.js"></script>
<body>
    
</body>
</html>

app.js的内容：

import common from "./components/common";
import util from "./components/util";
common()
util()

common.js 的内容：

export default function () {
    console.log("我是common");
}

util.js 的内容：

export default function () {
    console.log("我是util");
}

到这里初始化的项目就完成了，但是运行后控制台报错了，报错信息为：

Uncaught SyntaxError: Cannot use import statement outside a module

原因是浏览器，不支持import，下面我们就需要用webpack来解决这个问题。

2、安装webpack

在集成终端输入 npm i webpack webpack-cli -D 命令安装webpack。

安装好后，就可以使用 webpack 打包 src 下的 app.js 文件了，使之能够被浏览器使用。

3、使用webpack：

有两种方式：命令式使用webpack、配置式使用webpack

3.1、命令式使用webpack（不常用）

在终端输入以下命令， ./src/app.js 就是需要打包的文件。

3.2、配置式使用webpack（常用）

webpack 就提供了可以将参数配置化，需要在原有的基础上新增一个 webpack.config.js 的配置文件，里面的内容为：

可以在 package.json 的 scripts 字段中配置脚本，就可实现快捷使用：

  "scripts": {
    "dev": "webpack --config ./webpack.config.js"
  },

最后执行 pnpm dev 命令就好啦！

4、结果

以上两种方式打包后，都会在项目根目录生成一个 dist 文件夹，文件夹中会有一个 main.js 文件（这是默认行为，可以指定打包后的位置和文件名称），所以还需要在 index.html 中修改引入的路径，最后运行index.html，就可以正常输出了。

四、webpack的配置

1、基本配置

mode: 指定 Webpack 的运行模式，可选值为 development、production 或 none。该选项用于启用相应模式下的内置插件。
entry: 指定项目的入口点，即启动构建的文件。可以是一个文件或多个文件，默认为src/index.js。
output: 定义输出的文件路径和名称。通常包括 filename 和 path 属性。
loaders: 用于处理非 JavaScript 文件，如 CSS、图片等，将其转换为模块。例如，babel-loader 用于转换 ES6 代码，css-loader 用于加载 CSS 文件。
plugins: 用于扩展 Webpack 功能的插件。如 HtmlWebpackPlugin 用于生成 HTML 文件，UglifyJsPlugin 用于压缩 JavaScript 代码。
devServer: 配置开发服务器，支持热更新等功能。

2、Loader

2.1处理css

在 src 下创建 css 文件夹，然后新建一个 css 文件，里边写一些样式代码，在 index.html 中新增 div，使样式生效，然后在 app.js 中引入,此时项目结构为：

index.css 的内容为：

.box1 {
width: 100px;
height: 100px;
background-color: red;
}

app.js 内的内容为：

import common from "./components/common";
import util from "./components/util";
import './css/index.css' //引入css
common()
util()

index.html 的内容为：

    <script src="./dist/main.js"></script>
<body>
    <div class="box1"></div>
</body>

基本配置完成后，需要使用 Loader ，也就是 webpack 是处理不了 CSS 等资源的，需要借助 Loader 或者 Plugins ，处理 CSS 需要用到 css-loader 和 style-loader ，不管是 Loader 还是 Plugins 都是 JS 模块，所以需要安装，在终端输入以下命令：

pnpm i css-loader style-loader -D

安装后修改 webpack 的配置，修改后如下：

const path = require('path')
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
}

然后在终端输入pnpm dev 命令，最后运行index.html，运行结果如图：

2.2处理Sass、Less

在 css 文件夹中新建一个 index.sass 文件和 index.less 文件，在 app.js 中引入，并在 index.html 中新增 div

index.html 中新增：

    <div class="box2"></div>
    <div class="box3"></div>

index.less 的内容：

.box2 {
    width: 100px;
    height: 100px;
    background-color: rgb(158, 46, 46);
}

index.sass 的内容：

.box3
    width: 100px
    height: 100px
    background-color: aqua

app.js 中新增：

import './css/index.less'
import './css/index.sass'

处理 Less 的 loader 为 less-loader ，处理 Sass 的 loader 为 sass-loader ，同时需要安装 less 和 sass ，以便能够将 less 和 sass 编译成 css ：

pnpm i less less-loader sass sass-loader -D

安装后需配置webpack.config.js：

const path = require('path')
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
    },
    mode: 'production',
    module: {
        rules: [
            // 处理 css
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            // 处理 less
            {
                test: /\.less$/i,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            // 处理 sass
            {
                test: /\.s[ac]ss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            }
        ],
    },
}

运行结过为：

2.3处理图片

在项目中的 src 下新建 images 文件夹，并放入图片，在 index.css 中新增 CSS 代码，并在 index.html 中新增 div，此时项目结构为：

index.css 中新增的内容为：

.img1 {
    width: 200px;
    height: 300px;
    background-image: url('../images/邓紫棋.jpg');
    background-size: cover;
}

index.html 中新增的内容为：

    <div class="img1"></div>

webpack5 后不需要配置 loader ，只要设置相应的资源类型即可：

            // 处理 图片
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 200 * 1024
                    }
                }
            }

然后在终端输入pnpm dev 命令，最后运行index.html，运行结过如图：

3、Plugin

webpack 的插件能够增强 webapck 的功能，本身 webpack 只是解析依赖从而打包， loader 使webpack 能够转化文件，而 plugins 则使 webpack 能够拥有压缩，提取等更大强大的功能。webpack 的插件主要在 plugins 字段上，是个数组，也就是可以使用多个插件，每个插件在使用的时候都必须传入一个 new 实例。

3.1提取css为单独文件：

通过 MiniCssExtractPlugin 插件可以将 CSS 提取到单独的文件中。安装这个插件：

pnpm i mini-css-extract-plugin -D

修改webpack的配置：

打包后确实将 css 提取到单独的文件里了，但是 html 中还需要手动引入。

3.2自动引入JS和css

上面打包后，不管是 JS 还是 CSS 打包为单独文件时，在 index.html 中都需要手动引入相应的资源，如果修改了 webpack 打包 JS 和 CSS 文件的路径，那么 index.html 也需要修改。基于以上问题，可以通过 HtmlWebpackPlugin 插件解决。

pnpm i html-webpack-plugin -D

然后修改 webpack 配置：

打包后，可看到在 dist 下有一个 index.html ：

3.3压缩css

使用 CssMinimizerWebpackPlugin 这个插件能够将 CSS 压缩为一行，减少文件体积。安装这个插件：

pnpm i css-minimizer-webpack-plugin -D

修改 webpack 配置：

引入 css-minimizer-webpack-plugin ，然后在 plugins 中添加，最后修改 mode （ css

minimizer-webpack-plugin 默认在生产模式在才生效），打包后效果如下：

3.4自动清空打包目录

每次打包的时候，打包目录都会遗留上次打包的文件，为了保持打包目录的纯净，我们需要在打包前将打包目录清空这里我们可以使用插件 clean-webpack-plugin 来实现

pnpm i clean - webpack - plugin - D

配置：

3.5DevServer

devserver 可以在本地启动一个服务，使我们可以使用 http 协议去访问 index.html ，并且当修改代码时，能够监听当前项目的文件变动从而实现自动打包，而不用每次修改后都要手动打包：

在 webpack 配置中添加 devServe 字段，里边配置 host 、 port 等。同时还需要安装 webpack-dev

server 模块：

pnpm i webpack-dev-server -D

同时， webpack 打包命令也需要添加一个 serve 参数才能调用 webpack-dev-server ：

启动 server 前，可以先将 dist 目录下的文件清空，然后再运行 npm run dev ，可以发现 dist 下并没有生成任何文件，这是因为server 打包后是放在内存中的，所以 dist 下也不需要任何文件 server 一般是在开发环境下使用的，如果在生产环境，就需要打包到本地了。

webpack上半部分就结束了，讲了它的核心概念和使用，下期我们再说webpack的扩展！

蒙面大婶l

关注

37
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
webpack（上）

webpack 是一个流行的开源前端模块打包工具，它通过将各种静态资源（如JavaScript、CSS、HTML、图片等）视为模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并基于这些模块生成优化后的静态文件（通常是一个或多bundle）。这些bundle可以被浏览器直接使用，从而提高网页的加载速度和运行效率。
复制链接

扫一扫