webpack打包常用配置项

news2024/11/27 3:49:34

webpack打包配置项

参考链接
文件结构：最基础版 先安装 npm i webpack webpack-cli --dev
在这里插入图片描述
运行命令：npx webpack 进行打包

1. 配置webpack.config.js文件：

const path = require('path');
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    }
}

2. 配置相关打包loader

2.1. 打包css文件，如果新增style.css文件打包会报错，提示我们需要加载合适的loaders来加载css的文件类型：

加载css文件需要加载两个loader: style-loader css-loader

执行命令安装css loader: webpack的loader全部都是安装在开发者依赖中，因为在打包后都不需要这些了
npm i --dev style-loader css-loader
yarn add --dev style-loader css-loader

安装好后需要在webpack.config.js文件中配置它

const path = require('path');
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },

	// 配置loader........................
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            }
        ]
    }
}

sass和less预处理的loader也可以这样配置

2.2. 配置图片loader

在webpack.config.js文件中配置图片loader
图片使用内部的loader，所以key为type

const path = require('path');
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            }
        ]
    }
}

2.3. 使用新js特性，要兼容低版本的浏览器时用babel这个工具来转义js代码，webpack支持相应的loader

安装babel-loader：

npm i babel-loader @babel/core @babel/preset-env --dev
yarn add --dev babel-loader @babel/core @babel/preset-env

在webpack.config.js文件中配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

在这里插入图片描述
执行命令 npx webpack后查看dist.js文件
在这里插入图片描述

3. 使用webpack插件自动生成html文件

先安装html-webpack-plugin包

npm i html-webpack-plugin --dev
yarn add html-webpack-plugin --dev

3.2在webpack.config.js文件中导入并设置
3.3然后再运行 npx webpack命令打包， dist目录下会自动生成一个.html文件
在这里插入图片描述

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            }
        ]
    }
}

在这里插入图片描述

4. 压缩打包js代码，这样可以压缩，减少打包体积：使用webpack另一个常用插件 terser-webpack-plugin

安装插件：

npm i terser-webpack-plugin --dev
yarn add --dev terser-webpack-plugin

在webpack.config.js文件中配置，先导入

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    optimization: {
        minimize: true, // 是否压缩
        minimizer: [new TerserPlugin()], // 用什么工具压缩
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

在这里插入图片描述
执行npx webpack后查看dist.js文件，去掉了空格，换行之类的
在这里插入图片描述

5.如有修改自动打包更新页面，使用webpack插件 webpack-dev-server

安装插件

npm i -D webpack-dev-server
yarn add --dev webpack-dev-server

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    optimization: {
        minimize: true, // 是否压缩
        minimizer: [new TerserPlugin()], // 用什么工具压缩
    },
    devServer: {
        static: './dist', // 指定目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

在这里插入图片描述
为了方便启动项目，在package.json文件中配置scripts项

package.json文件中添加scripts项
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.22.15",
    "@babel/preset-env": "^7.22.15",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "style-loader": "^3.3.3",
    "terser-webpack-plugin": "^5.3.9",
    "webpack": "^5.88.2"
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }
}

在这里插入图片描述
命令行执行: npm start / yarn start就会自动打开 html页面,如果修改内容。
由于打包后的dist.js文件名是一样的，浏览器会根据这个文件名进行缓存，一般为了避免浏览器进行缓存，会给文件名加上一串随机的字符，每次更新之后都改为新的字符，webpack支持每次打包后都生成新的字符。在webpack.config.js文件中，output修改filename文件名，
在这里插入图片描述

5. 如何给导入的路径设置别名，有时候js文件嵌套的比较深，访问相对路径需要使用很多的…/，webpack能实现一个路径别名来把这一串相对路径替换掉，key为别名，value:为真实目录

比如ultils: path.resolve(__dirname, ‘src/ultils’);
在这里插入图片描述

比如printDate.js文件中引入了ultils下面的文件
在这里插入图片描述
可以把…/…/去掉,变为import { dateToStr } from “ultils/date”; 会匹配ultils的真实目录

6. 如需分析打包后的结果，哪个文件体积大，webpack有一个可视化打包分析工具：webpack-bundle-analyzer

安装工具：

npm i webpack-bundle-analyzer --dev
yarn add --dev webpack-bundle-analyzer

在webpack.config.js中配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
const TerserPlugin = require('terser-webpack-plugin'); // 钩子函数
const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer'); // 对象，也可以直接获取里面的BundleAnalyzerPlugin方法
// const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // 下面直接使用new WebpackBundleAnalyzerPlugin()

module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: '[name].[contenthash].js', // 打包后的文件名 // [name]:webpack会识别为默认的文件名，[contenthash]：会根据文件内容进行hash计算，得到不重复字符
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    resolve: {
        alias: { // key: 别名, value: 真实的目录
            ultils: path.resolve(__dirname, 'src/ultils')
        }
    },
    optimization: {
        minimize: true, // 是否压缩
        minimizer: [new TerserPlugin()], // 用什么工具压缩
    },
    devServer: {
        static: './dist', // 指定目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        }),
        new WebpackBundleAnalyzerPlugin.BundleAnalyzerPlugin(), // WebpackBundleAnalyzerPlugin是个对象，点里面的BundleAnalyzerPlugin方法
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/976735.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

聊聊如何玩转spring-boot-admin

聊聊如何玩转spring-boot-admin

前言 1、何为spring-boot-admin&#xff1f; Spring Boot Admin 是一个监控工具&#xff0c;旨在以良好且易于访问的方式可视化 Spring Boot Actuators 提供的信息 快速开始 如何搭建spring-boot-admin-server 1、在服务端项目的POM引入相应的GAV <dependency><grou…
阅读更多...
Linux之NFS服务器

Linux之NFS服务器

目录 Linux之NFS服务器 简介 NFS背景介绍 生产应用场景 NFS工作原理 NFS工作流程图 流程 NFS的安装 安装nfs服务 安装rpc服务 启动rpcbind服务同时设置开机自启动 启动nfs服务同时设置开机自启动 NFS的配置文件 主配置文件分析 示例 案例 --- 建立NFS服务器&#…
阅读更多...
4、QT中的网络编程

4、QT中的网络编程

一、Linux中的网络编程 1、子网和公网的概念 子网网络&#xff1a;局域网&#xff0c;只能进行内网的通信公网网络&#xff1a;因特网&#xff0c;服务器等可以进行远程的通信 2、网络分层模型 4层模型&#xff1a;应用层、传输层、网络层、物理层 应用层&#xff1a;用户自…
阅读更多...
C++核心基础教程之STL容器详解 vector容器的概述 vector常见的API

C++核心基础教程之STL容器详解 vector容器的概述 vector常见的API

容器作用域迭代器 就是定义一个迭代器&#xff0c;迭代器的名称叫it 保存起始迭代器 *it int 相当与取内容&#xff0c;像指针&#xff0c;但不是指针&#xff0c;因为底层很多细节 vector 一次开辟两倍原来的空间 另辟空间 迭代器右边是开区间&#xff0c;不包含右端…
阅读更多...
sql中的排序函数dense_rank()，RANK()和row_number()

sql中的排序函数dense_rank()，RANK()和row_number()

dense_rank()&#xff0c;RANK()和row_number()是SQL中的排序函数。 为方便后面的函数差异比对清晰直观&#xff0c;准备数据表如下&#xff1a; 1.dense_rank() 函数语法&#xff1a;dense_rank() over( order by 列名 【desc/asc】) DENSE_RANK()是连续排序&#xff0c;比如…
阅读更多...
避雷，软件测试常见的误区之一

避雷，软件测试常见的误区之一

随着软件规模的不断扩大&#xff0c;软件设计的复杂程度不断提高&#xff0c;软件开发中出现错误或缺陷的机会越来越多。同时&#xff0c;市场对软件质量重要性的认识逐渐增强。所以&#xff0c;软件测试在软件项目实施过程中的重要性日益突出。但是&#xff0c;现实情况是&…
阅读更多...
RS-485/RS-422收发器电路 DP3085 国产低成本替代MAX3085

RS-485/RS-422收发器电路 DP3085 国产低成本替代MAX3085

DP3085是5V、半双工、15kV ESD 保护的 RS-485/RS-422 收发器电路&#xff0c;电路内部包含一路驱动器和一路接收器。 DP3085具有增强的摆率限制&#xff0c;助于降低输出 EMI 以及不匹配的终端连接引起的反射&#xff0c;实现 500kbps 的无误码数据传输。 DP3085芯片接收器输入…
阅读更多...
Uniapp学习之从零开始写一个简单的小程序demo（新建页面，通过导航切换页面，发送请求）

Uniapp学习之从零开始写一个简单的小程序demo（新建页面，通过导航切换页面，发送请求）

先把官网文档摆在这&#xff0c;后面会用到的 [uniapp官网文档]: https://uniapp.dcloud.net.cn/vernacular.html# 一、开发工具准备 1-1 安装HBuilder 按照官方推荐&#xff0c;先装一个HBuilder 下载地址&#xff1a; https://www.dcloud.io/hbuilderx.html1-2 安装微信开…
阅读更多...
论文复现--VideoTo3dPoseAndBvh(视频转BVH和3D关键点开源项目)

论文复现--VideoTo3dPoseAndBvh(视频转BVH和3D关键点开源项目)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/HW140701/VideoTo3dPoseAndBvh 所需环境&#xff1a; Windows10&#xff0c;CUDA11.6&#xff0c;conda 4.13.0&#xff1b; 目录 环境搭建conda list配置内容演示生成文件说明 环境搭建 # 创建环境 conda…
阅读更多...
淘宝天猫API技术解析，实现关键词搜索淘宝商品（商品详情接口等）批量获取，可高并发

淘宝天猫API技术解析，实现关键词搜索淘宝商品（商品详情接口等）批量获取，可高并发

淘宝和天猫提供了官方API接口&#xff0c;开发者可以通过这些接口获取商品信息、进行交易操作等。下面我将简要介绍如何使用淘宝API进行关键词搜索商品并批量获取商品详情。 首先&#xff0c;需要了解淘宝API的几个主要接口&#xff1a; 搜索接口&#xff1a;用于根据关键词搜…
阅读更多...
软件与系统安全复习

软件与系统安全复习

软件与系统安全复习 课程复习内容 其中 软件与系统安全基础 威胁模型 对于影响系统安全的所有信息的结构化表示 本质上&#xff0c;是从安全的视角解读系统与其环境 用于理解攻击者 什么可信、什么不可信攻击者的动机、资源、能力&#xff1b;攻击造成的影响 具体场景…
阅读更多...
Android studio实现自定义圆形进度条 带刻度进度条 计步效果 时速表 水波纹效果

Android studio实现自定义圆形进度条 带刻度进度条 计步效果 时速表 水波纹效果

目录 原文链接效果图values /layout /activity原文链接 效果图 点击重置后： 该项目总共实现了三种圆形进度条效果 CircleProgress：圆形进度条，可以实现仿 QQ 健康计步器的效果，支持配置进度条背景色、宽度、起始角度，支持进度条渐变DialProgress：类似 CircleProgress，…
阅读更多...
linux jar包class热部署 工具 arthas安装及使用

linux jar包class热部署 工具 arthas安装及使用

在不改变类、方法 的前提下&#xff0c;在方法中对业务逻辑做处理 或 打日志等情况下使用。 建议线上日志调试时使用&#xff1a; arthas安装 1. 下载文件 arthas-packaging-3.7.1-bin.zip https://arthas.aliyun.com 2. 服务器安装arthas 2.1 服务器指定目录下创建目录 c…
阅读更多...
双系统备忘

双系统备忘

1.装了双系统&#xff0c; 找不到ubuntu,只有windows 从windows启动cmd bcdedit /set “{bootmgr}” path \EFI\ubuntu\grubx64.efi双系统分别装在两块磁盘&#xff0c; windows装在硬盘0&#xff0c; ubuntu装在硬盘1 然后启动是从硬盘0读的boot, 现在我要移除windows硬盘0…
阅读更多...
Vue + Element UI 前端篇（一）：搭建开发环境

Vue + Element UI 前端篇（一）：搭建开发环境

Vue Element UI 实现权限管理系统 前端篇&#xff08;一&#xff09;&#xff1a;搭建开发环境 技术基础 开发之前&#xff0c;请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架vue-router, vue.js 配套路由vuex&#xff0c;vue.js 应用状态管理库Element&#xff0c;饿…
阅读更多...
基环树和点度数相关的计数：CF1863G

基环树和点度数相关的计数：CF1863G

https://codeforces.com/contest/1863/problem/G 首先建图&#xff0c;然后分析出交换在图上的变化&#xff0c;发现每条点最多只有一个入边标粗&#xff0c;求最终形态。 首先可以猜答案为 ∏ v ( i n v 1 ) \prod_{v}(\mathrm{in}_v 1) ∏v​(inv​1)&#xff0c;但是环…
阅读更多...
FOXBORO P0926KP控制器

FOXBORO P0926KP控制器

应用领域&#xff1a; FOXBORO P0926KP 控制器广泛应用于工业自动化和过程控制领域&#xff0c;包括化工、石油和天然气、电力、制造业等各种行业。 控制能力&#xff1a; 该控制器具有高性能的控制能力&#xff0c;可执行复杂的控制策略和算法&#xff0c;以确保工业过程的高…
阅读更多...
监控 -- linux中的一些系统性能状态指令、Prometheus

监控 -- linux中的一些系统性能状态指令、Prometheus

目录 监控查看性能相关命令Prometheus1、安装和配置2、将 NFS服务器和LB服务器作为exporter采集数据3、在prometheus server里添加安装exporter程序的服务器 grafana出图工具 监控 监控的目的是获取数据&#xff0c;通过数据分析了解机器是否正常运行 查看性能相关命令 查看c…
阅读更多...
R7 7840U和r7 6800u差距 锐龙R77840U和6800u对比

R7 7840U和r7 6800u差距 锐龙R77840U和6800u对比

锐龙7 7840U 采用Zen3架构、8核心16线程&#xff0c;基准频率疑似3.3GHz&#xff0c;同样集成RDNA3架构核显Radeon 780M&#xff0c;也是12个CU单元 r7 7840U 的处理器在 Cinebench R23 中多核跑分 14825 分 选R7 7840U还是r7 6800u这些点很重要 http://www.adiannao.cn/dy r…
阅读更多...
CMAK学习

CMAK学习

VS中的cmake_cmake vs_今天也要debug的博客-CSDN博客 利用vs2017 CMake开发跨平台C项目实战_cmake vs2017_神气爱哥的博客-CSDN博客 【【入门】在VS中使用CMake管理若干程序】https://www.bilibili.com/video/BV1iz4y117rZ?vd_source0aeb782d0b9c2e6b0e0cdea3e2121eba
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023