前端开发工程师——webpack

一.环境准备

npm init -y

npm i webpack webpack-cli -D

打包命令

npx webpack ./src/main.js --mode=development
//development开发模式
//production生产模式

npx webpack 

直接运行就行

二.加载器loader

在less/stylus/css/sass/images中添加适当的样式

例如:sass

.box3width: 100pxheight: 100pxbackground-color: hotpink
.box4 {width: 100px;height: 100px;background-color: black;
}

main.js

import count from "./js/count"
import sum from "./js/sum"
// 要打包就必须引入css
import "./css/index.css"
// 引入less
import "./less/index.less"
// 引入sass
import "./sass/index.sass"
import "./sass/index.scss"// 引入styl
import "./stylus/index.styl"console.log(count(2,1));
console.log(sum(1,2,3,4));

webpack. config.js配置文件

const path = require("path");//node.jsmodule.exports = {// 入口entry: "./src/main.js",//相对路径// 输出output: {// path文件的输出路径,是绝对路径//__dirname表示当前文件的文件夹path: path.resolve(__dirname, "dist"),// 文件名filename: "main.js",},// 加载器module: {rules: [//loader的配置// 处理css加载器{test: /\.css$/,use: ['style-loader', 'css-loader']},// 安装less和less-loader// npm install less less-loader --save-dev{test: /\.less$/,use: ["style-loader","css-loader","less-loader"],},// 安装sass-loader// npm install sass-loader sass webpack --save-dev{test: /\.s[ac]ss$/i,use: ["style-loader","css-loader","sass-loader"],},// 处理styl资源//npm i stylus-loader -D{test: /\.styl$/,use: ["style-loader","css-loader","stylus-loader"],},// 处理图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转base64,优点:减少请求数量maxSize: 10 * 1024,},}},]},// 插件plugins: [//plugins的配置],// 模式mode: "development",
};

三.修改输出文件目录

在webpack. config.js配置文件

// 输出output: {// path文件的输出路径,是绝对路径//__dirname表示当前文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件打包输出的文件名filename: "static/js/main.js",// 自动清除上次打包的内容clean: true,},
// 处理图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转base64,优点:减少请求数量maxSize: 10 * 1024,},},generator: {// 输出图片的名称// hash:10表示hash取前10位filename: "static/images/[hash:10][ext][query]",}},

四.处理图标资源

 // 处理图标{test: /\.(ttf|woff2?)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图标转base64maxSize: 10 * 1024,},},generator: {// 输出图标的名称// hash:10表示hash取前10位filename: "static/media/[hash:10][ext][query]",}},

五.eslint基本使用

配置文件

const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [//plugins的配置
// npm install eslint-webpack-plugin --save-devnew ESLintPlugin({// 检测那些文件context: path.resolve(__dirname,"src"),}),],

同级src,下面是文件内容

module.exports = {// 继承Eslint规则extends:["eslint:recommended"],env: {node: true,//启用node中的全局变量browser:true,//启用浏览器中的全局变量},parserOptions: {ecmaVersion: 6,sourceType: "module",},rules: {"no-var":2,//不能使用var定义变量}
}


六.babel基础用法

配置文件

下载babel

npm install -D babel-loader @babel/core @babel/preset-env

{test:/\.js$/,exclude:/node_modules/,use: {loader:"babel-loader",// options: {//     presets:["@babel/preset-env"],// },},},

babel.config.js文件

module.exports = {// 智能预设,能够编译es6语法presets:["@babel/preset-env"],
}

七.处理html资源

下载安装

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

配置文件引入

const HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [//plugins的配置// npm install eslint-webpack-plugin --save-devnew ESLintPlugin({// 检测那些文件context: path.resolve(__dirname,"src"),}),new HtmlWebpackPlugin({// 模板:以public/index.html文件创建新的html文件// 新的html文件特点:1.结构和原来一样,自动引入打包输出的结果template: path.resolve(__dirname,"public/index.html"),})],

开发服务器 

npm install webpack-dev-server --save-dev

// 开发服务器devServer: {host: "localhost",//启动服务器域名port:3000,//启动服务器端口号open:true,//是否自动打开浏览器},

八.webpack高级 

SourceMap

表示可以把错误类型的代码映射出来

HMR (减少时间)

main.js

oneOf(提高打包速度)

include/exclude

 

多进程打包 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python筑基之旅-文件(夹)操作和流

目录 一、文件操作 1、文件打开与关闭 2、文件读写 3、文件操作模式 4、文件编码 二、文件夹操作 1、创建文件夹 2、删除文件夹 3、改变当前工作目录 4、获取当前工作目录 5、检查文件/文件夹是否存在 6、遍历文件夹 三、文件路径操作 1、获取绝对路径 2、构建完…

爬山算法全解析:掌握优化技巧,攀登技术高峰!

一、引言 爬山算法是一种局部搜索算法,它基于当前解的邻域中进行搜索,通过比较当前解与邻域解的优劣来更新当前解,从而逐步逼近最优解。本文将对爬山算法进行详细的介绍。 二、爬山算法简介 爬山算法是一种基于贪心策略的优化算法&#xff…

11-异常-Exception

1. 异常示例 public static void main(String[] args) {int num1 10;int num2 0;int res num1 / num2;System.out.println("程序继续运行...."); } 数学上,做除法时,分母不能为0,运行到第三行就会出现错误,程序运行…

如何利用Ubuntu服务器运行深度学习项目?

一、整体思路 先配置好服务器端的软件环境(工程源码,miniconda,cuda,显卡驱动等),然后用自己电脑的pycharm远程连接服务器运行代码。一句话总结:借用服务器资源运行代码,本地pycharm…

【推荐系统-特征工程】按每个日期生产特征的大忌

对于每个date&#xff0c;生产这个date前7天的某特征&#xff0c; inputDate 20240501 beginDate 20240501 - 7day SQL要用between这种逻辑 比如where dateColumn > beginDate and dateColumn < inputDate 而不是仅where dateColumn > beginDate。。。

ubuntu安装Stable Video Diffusion(SVD)让图片动起来

目录 写在前面 一、克隆或下载项目 二、下载预训练模型 三、创建环境 四、安装依赖 五、启动项目 六、解决报错 1.预训练模型下不来 2.TiffWriter.write() got an unexpected keyword argument fps 3.安装ffmpeg 4.No module named scripts 七、测试 写在前面 Stab…

深入解析内置模块OS:让你的Python代码更懂操作系统

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、OS模块简介与基础应用 二、文件与目录操作详解 三、OS模块的高级应用&#xff1a;双色…

第5章:软件工程基础知识

软件工程 软件工程过程是指为获得软件产品&#xff0c;在软件工具的支持下由软件工程师完成的一系列软件工程活动&#xff0c;包括以下4个方面。 (1)P(Plan)—软件规格说明。规定软件的功能及其运行时的限制。(2)**D(Do)**一软件开发。开发出满足规格说明的软件。(3)**C(Check…

力扣 90. 子集 II python AC

递归 class Solution:def __init__(self):self.nums Noneself.size Noneself.res []def dfs(self, ans, x0):if ans.copy() not in self.res:self.res.append(ans.copy())for i in range(x, self.size):ans.append(self.nums[i])self.dfs(ans, i 1)ans.pop()def subsetsWi…

web学习笔记(五十八)

目录 1. v-model 双向数据绑定 2. 事件修饰符 3. 路径别名 4. setup语法糖 4.1 语法糖的概念 4.2 setup语法糖 5. 配置代理服务器 1. v-model 双向数据绑定 v-model 双向数据绑定只能使用在表单标签&#xff1b; v-model双向数据绑定原理&#xff1a;采用 Object.de…

Go语言快速上手Zap日志库

1. Zap日志库简介 Zap是由Uber开源的Go语言日志库&#xff0c;以其高性能和易用性在Go社区中广受欢迎。它提供了丰富的日志记录功能&#xff0c;包括不同级别的日志记录、结构化日志输出、日志轮转等。对于Go语言开发者来说&#xff0c;Zap是一个非常好的选择&#xff0c;特别…

解决updateByExample时属性值异常的问题(部分属性值没有使用占位符?进行占位,而是变成了属性的名称)

目录 场景简介代码片断实体类 报错信息排查原因解决测试过程解决方案 场景简介 1、程序将mybatis框架升级为3.5.9版本后执行updateByExample方法时报错 代码片断 Condition condition new Condition(MbCcsSessionConfig.class); condition.createCriteria().andEqualTo(&quo…

【openlayers系统学习】4.3VectorTile 功能交互(指针悬停在要素上时,绘制矩形框)

三、 VectorTile 功能交互&#xff08;指针悬停在要素上时&#xff0c;绘制矩形框&#xff09; 矢量切片的好处是我们可以与要素交互&#xff0c;因为我们在客户端上有数据。但需要注意的一件事是矢量切片针对渲染进行了优化。这意味着要素仅包含过滤和渲染所需的属性&#xf…

panic: concurrent write to websocket connection【golang、websocket】

文章目录 异常信息原由代码错误点 解决办法 异常信息 panic: concurrent write to websocket connection原由 golang 编写 websocket go版本&#xff1a;1.19 使用了第三方框架&#xff1a; https://github.com/gorilla/websocket/tree/main 代码 server.go // Copyright …

【版本标记 | Github】Github 中常见的版本标记(Tags)有哪一些?分别在什么情况下使用?

背景 无论是自己自由开发项目还是公司协同合作&#xff0c;随着软件的迭代升级&#xff0c;都需要一个比较规范&#xff08;好区分&#xff09;的标记来区分不同的软件版本。通常&#xff0c;我们使用不同的数字来表示不同的版本&#xff0c;例如大版本号加上小版本号等&#…

Java核心:注解处理器

Java提供了一个javac -processor命令支持处理标注有特定注解的类&#xff0c;来生成新的源文件&#xff0c;并对新生成的源文件重复执行。执行的命令大概是这样的: javac -XprintRounds -processor com.keyniu.anno.processor.ToStringProcessor com.keyniu.anno.processor.Po…

基于微信小程序的在电影线订票小程序+web管理 uniapp,vue,ssm

基于微信小程序的在电影线订票小程序web管理 uniapp&#xff0c;vue&#xff0c;ssm 相关技术 javassmuniapp微信开发者工具hbuildervueelementui前后端分离 -mysql

PointCloudLib 点云半径滤波实现 C++版本

0.展示效果 滤波之前 1.算法原理 半径滤波原理非常直观,主要用于平滑三维点云数据并去除离群点。 设定搜索半径:首先,为每个点设定一个搜索半径r。这个半径定义了该点周围的一个球形区域。计算邻域点数:接着,计算每个点在其搜索半径r内的邻近点的数量。判断与过滤:根据…

集合框架有哪些

ava集合框架是一个架构&#xff0c;提供了一组接口和类&#xff0c;用于存储和操作一组数据。集合框架主要包含以下几种类型的集合&#xff1a; 1. 集合接口 集合框架中的主要接口包括&#xff1a; Collection&#xff1a;所有集合接口的根接口。List&#xff1a;有序集合&a…