webpack快速入门---webpack的安装和基本使用

webpack是什么

        本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

 

        简单概述一下就是，webpack可以将多模块化的项目结构和兼容性较差的语法规则，打包成简单的结构，兼容性好的语法，即将复杂的内容结构简单化，缩减文件的数量，提高网络传输效率和浏览器的识别渲染。

webpack 官网(webpackjs.com)

webpack安装和使用

我们使用npm安装webpack

npm init -y

 

先初始化拿到一个package.json文件，name是项目名称（文件夹的名称），这里的description的内容其实就是md文件内的介绍（没有其他作用）

然后我们再给这个项目安装webpack，注意：一般不会对webpack进行全局安装，因为再不同的项目里，可能webpack的版本不同会产生错误，所以我们对每个项目都单独安装webpack

npm install webpack webpack-cli -save-dev

这里可以看到安装成功后，多了一个json文件和node_modules文件夹，以及package.json中多了一个devDependencies属性，这里显示了我们安装的webpack包

接下来再目录下创建webpack.config.js配置文件和src文件夹（这里是项目要打包的主要代码）

然后我们需要对webpack.config.js文件进行一些配置


// 引用nodejs的path模块
const path = require("path");

module.exports = {
    mode: 'development',//开发环境
    entry : path.join(__dirname,'src','index.js'),// 打包入口
    output:{
        path:path.join(__dirname,'dist'),// 打包结束的位置
        filename :'bundle.js' // 指定的打包后文件名称
    }
}

这里使用了path的join方法，它指向了一个路径，__dirname表示当前的文件所在的根目录（webpack.config.js在webpackApp的目录下，这里就表示webpackApp），

然后将我们自己的代码写到src中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack入门</title>
</head>
<body>
    <p>webpack的基本使用</p>
</body>
</html>
let fn = (num)=>{
    return num;
}// es6的箭头函数
console.log("webpack打包," ,fn(10));

 配置一些package的脚本script

"build":"webpack"

此时我们就可以通过build指令来运行webpack

npm run build

可以看到在根目录下多了一个dist文件夹，里面有一个bundle.js文件，这个文件就是index.js打包后的内容，

插件

但是src中还有一个html文件并没有被打包进来，这里我们需要一个插件，将html也进行打包

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

安装好插件后，可以在package.json中看到这个插件，

接下来对这个插件进行导入配置


// 引用nodejs的path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',//开发环境
    entry : path.join(__dirname,'src','index.js'),// 打包入口
    output:{
        path:path.join(__dirname,'dist'),// 打包结束的位置
        filename :'bundle.js' // 指定的打包后文件名称
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,"src","index.html"),// 打包入口
            filename : "index.html"// 指定的打包后文件名称
        })
    ]
}

然后我们在执行一次打包命令

可以看到dist目录下多了一个html文件，同时这个文件相比打包前的文件多了一个script标签自动引入了js

打开可以查看网页

导入server服务包

npm install webpack-dev-server -save-dev

// 安装webpack-dev-server,实时更新打包文件

更新一下webpack.config.js devServer配置


// 引用nodejs的path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',//开发环境
    entry : path.join(__dirname,'src','index.js'),// 打包入口
    output:{
        path:path.join(__dirname,'dist'),// 打包结束的位置
        filename :'bundle.js' // 指定的打包后文件名称
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,"src","index.html"),// 打包入口
            filename : "index.html"// 指定的打包后文件名称
        })
    ],
    devServer:{
        port: 5000,
        static : path.join(__dirname,"dist")
    }

}

在package.json中的script脚本添加dev命令 

"dev": "webpack-dev-server"

然后运行命令

npm run dev

这里开启了一个服务，端口号为5000

此时我们可以修改src中的代码，页面会立刻刷新， 

 注意：在修改内容后自动更新，但这里并没有生成新文件，而是存储在浏览器内存中，原来的dist文件夹没有变化，所以这里只是预览变化，要真正打包项目还是需要使用build命令

编译es6代码

我们可以注意到，在src中的箭头函数打包后并没有变化，这里我们需要配置模板语法，编译es6代码

npm install @babel/core @babel/preset-env babel-loader --save-dev

这里我们需要新建一个.babelrc文件，和对webpack.config.js进行配置

 module:{//配置模板
        rules:[//规则设置
            {
                test: /\.js$/,//只对js文件生效
                loader: "babel-loader",// 转换es6
                include:path.join(__dirname,"src"),//处理src内的文件
                exclude:/node_modules/ //不处理node_modules内的文件
            }
        ]
    }
{
    // 预设：Babel的一系列插件的集合
    "presets": ["@babel/preset-env"]
}

然后再打包项目查看 npm run build

可以看到箭头函数被编译了

到这里我们就基本掌握了webpack打包项目的使用,当然webpack还有更强大的功能，这里仅仅只是它最基础的功能，他还有更多的包和插件以及衍生功能，

总结

完整目录

主要代码

// webpack.config.js:

// 引用nodejs的path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',//开发环境
    entry : path.join(__dirname,'src','index.js'),// 打包入口
    output:{
        path:path.join(__dirname,'dist'),// 打包结束的位置
        filename :'bundle.js' // 指定的打包后文件名称
    },
    module:{//配置模板
        rules:[//规则设置
            {
                test: /\.js$/,//只对js文件生效
                loader: "babel-loader",// 转换es6
                include:path.join(__dirname,"src"),//处理src内的文件
                exclude:/node_modules/ //不处理node_modules内的文件
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,"src","index.html"),// 打包入口
            filename : "index.html"// 指定的打包后文件名称
        })
    ],
    devServer:{
        port: 5000,
        static : path.join(__dirname,"dist")
    }
}

// package.json:

{
  "name": "webpackapp",
  "version": "1.0.0",
  "description": "我的第一个webpackApp",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.24.6",
    "@babel/preset-env": "^7.24.6",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

// .babelrc:
{
    // 预设：Babel的一系列插件的集合
    "presets": ["@babel/preset-env"]
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

UVa11604 General Sultan

UVa11604 General Sultan

UVa11604 General Sultan 题目链接题意分析AC 代码 题目链接 UVA - 11604 General Sultan 题意 给出一些0和1组成的模式串&#xff0c;问是否存在一个串使得有多种方案将这个串分解成模式串。    给一个包含n&#xff08;n≤100&#xff09;个符号的二进制编码方式&#xff…
阅读更多...
Shell脚本的分支语句，循环语句

Shell脚本的分支语句，循环语句

分支语句 if 表达式 then 命令表 fi 如果表达式为真&#xff0c;则执行命令表中的命令&#xff0c;否则退出。执行fi后的语句。 给文件权限:chmod 0777 文件名 输出: ./文件名 grep 查找用户名&#xff0c;管道wc -l 统计字符 2.多路分支语句 记得给文件名权限喔&#x…
阅读更多...
M功能-支付平台(六)

M功能-支付平台(六)

target&#xff1a;离开柬埔寨倒计时-217day 今天突然发现我在csdn居然把我ip属地搞出来了&#xff0c;之前都没注意到&#xff0c;哎 前言 M功能演示版本做到后期(也就是第二周的后面3天)真的很心酸&#xff0c;这边安排的4后端后面都放弃了&#xff0c;觉得做不出来&#…
阅读更多...
【YashanDB知识库】ODBC驱动类问题定位方法

【YashanDB知识库】ODBC驱动类问题定位方法

【标题】ODBC驱动类问题定位方法 【需求分类】故障分析 【关键字】ODBC 【需求描述】由于我们的ODBC接口目前尚不完善&#xff0c;经常会遇见ODBC接口能力不足导致应用功能无法运行的问题&#xff0c;需要定位手段确定底层是哪个接口报错 【需求原因分析】方便一线数据库管…
阅读更多...
图像去雾并与其他非物理模型进行对比

图像去雾并与其他非物理模型进行对比

matlab clear clc close all imgimread( scene1.jpg);subplot(221),imshow(uint8(img)), title(原始低照度图像”);img(::,1)255-img(::1); img(::,2)255-img(:2); img(:,:3)255-img(: 3); szsize(img); wsZ(2); hsz(1); %计算RGB取最小值后的图像darkl dark l zeros(h,w); for…
阅读更多...
Nginx配置及优化

Nginx配置及优化

Nginx配置及优化 前言nginx.conf拆分理解上线 最近在配置Nginx的时候&#xff0c;偶尔一些细致的理论有些模糊&#xff0c;配置起来费了点功夫&#xff0c;今天来详细写一下我个人的理解&#xff0c;文章参考了一些官网和其他优秀博主的文章http://t.csdnimg.cn/GbID9。 前言 …
阅读更多...
Java设计模式总结

Java设计模式总结

《武林外传》老白曾经说过这样一句话。高手就是手里无刀&#xff0c;心中也无刀。 类似于设计模式&#xff0c;你不知不觉中已经融进你的代码中了&#xff0c;但你并不知已经运用了。下面我总结几个我觉得比较常用的设计模式。 1&#xff1a;设计模式分类 总体来说设计模式分为…
阅读更多...
小程序内的分包与数据共享

小程序内的分包与数据共享

一:数据共享 小程序内的数据共享和vue当中不一样,vue当中的vue实例可以使得所有的组件都能this.store 但是小程序它只有page对象,和组件实例对象.对于vue而言,vue实例可以使得添加的组件都有. 但是page对象页面对象,不能使得页面内部有.只能使得这个页面内能访问.vue实例,会…
阅读更多...
桌面上怎么记工作任务更加合理？能设置桌面提醒的便签软件

桌面上怎么记工作任务更加合理？能设置桌面提醒的便签软件

在快节奏的现代工作中&#xff0c;电脑已成为我们处理工作的主要工具。每天&#xff0c;我们都要面对电脑屏幕&#xff0c;处理大量的工作任务。为了更好地管理这些琐碎却重要的工作&#xff0c;将工作任务直接记录在桌面上&#xff0c;随时查看和调整&#xff0c;无疑是一种高…
阅读更多...
自定义注解+AOP切面实现日志记录

自定义注解+AOP切面实现日志记录

自定义注解&#xff1a; Target(ElementType.METHOD)// 作用在方法上 Retention(RetentionPolicy.RUNTIME) Documented Inherited // 子类可以继承此注解 public interface OperationLog { } aop切面&#xff1a; Slf4j Aspect Component public class OperationAspect {Au…
阅读更多...
【Text2SQL 论文】评估 ChatGPT 的 zero-shot Text2SQL 能力

【Text2SQL 论文】评估 ChatGPT 的 zero-shot Text2SQL 能力

论文&#xff1a;A comprehensive evaluation of ChatGPT’s zero-shot Text-to-SQL capability ⭐⭐⭐⭐ arXiv:2303.13547 这篇论文呢综合评估了 ChatGPT 在 zero-shot Text2SQL 任务上的表现。 dataset 使用了 Spider、Spider-SYN、Spider-DK、Spider-Realistic、Spider-CG…
阅读更多...
SQL刷题笔记day6-1

SQL刷题笔记day6-1

1从不订购的客户 分析&#xff1a;从不订购&#xff0c;就是购买订单没有记录&#xff0c;not in 我的代码&#xff1a; select c.name as Customers from Customers c where c.id not in (select o.customerId from Orders o) 2 部门工资最高的员工 分析&#xff1a;每个部…
阅读更多...
SFOS2：组件介绍

SFOS2：组件介绍

一、前言 在sailfish os application的开发过程中&#xff0c;几乎是困难重重&#xff0c;因为我暂未找到具有完整性、指导性、易懂性的开发文档&#xff0c;特别是组件的使用&#xff0c;现决定将自己的探究结果记录下来。因此&#xff0c;这篇文章只会具有参考价值&#xff0…
阅读更多...
[数据集][目标检测]道路井盖下水道井盖开关闭和检测数据集VOC+YOLO格式407张2类别

[数据集][目标检测]道路井盖下水道井盖开关闭和检测数据集VOC+YOLO格式407张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;407 标注数量(xml文件个数)&#xff1a;407 标注数量(txt文件个数)&#xff1a;407 标注类别…
阅读更多...
swift中json和字典Dict或者数组相互转换，JSONSerialization的强大使用

swift中json和字典Dict或者数组相互转换，JSONSerialization的强大使用

在Swift中&#xff0c;你可以使用JSONSerialization类将JSON字符串转换为字典。要将 Swift 字典转换为 JSON 字符串&#xff0c;我们可以使用JSONSerialization类的data(withJSONObject:options:)方法。这个方法将字典转换为二进制数据&#xff0c;然后我们可以使用String(data…
阅读更多...
20 VUE学习：插件

20 VUE学习：插件

介绍 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例&#xff1a; import { createApp } from vueconst app createApp({})app.use(myPlugin, {/* 可选的选项 */ })一个插件可以是一个拥有 install() 方法的对象&#xff0c;也可以直接…
阅读更多...
股票量化交易上手，一个特别简单却长期可用的交易策略，官方接口

股票量化交易上手，一个特别简单却长期可用的交易策略，官方接口

股票实现程序化自动化交易的三个基础&#xff1a;获取数据、执行交易、查询账户。 以后说到策略示例的时候就不介绍接口的基础使用方法了&#xff0c;随便一个策略把过程写出来都会很啰嗦&#xff0c;尽量压缩内容吧&#xff0c;这些内容是面向新手的&#xff0c;大佬们忽略细节…
阅读更多...
基于51单片机的酒精浓度检测仪的设计

基于51单片机的酒精浓度检测仪的设计

一.硬件方案 硬件部分为利用MQ3气敏传感器测量空气中酒精浓度&#xff0c;并转换为电压信号&#xff0c;经A/D转换器转换成数字信号后传给单片机系统&#xff0c;由单片机及其相应外围电路进行信号的处理&#xff0c;显示酒精浓度值以及超阈值声光报警。电路主要由51单片机最小…
阅读更多...
自学SPSS，有哪些教学视频或书籍推荐?

自学SPSS，有哪些教学视频或书籍推荐?

书籍推荐 经过长达八年的不断迭代与优化&#xff0c;SPSSAU的用户群体已经远超简单的数据分析层面&#xff0c;而是逐步深入到了学术研究的精髓之中。如今&#xff0c;无论是在SCI、EI等国际权威学术期刊&#xff0c;还是北大核心期刊、CSSCI等国内顶尖学术期刊上&#xff0c;…
阅读更多...
Django学习

Django学习

1.pycharm社区版创建django PyCharm社区版如何创建Django项目并运行_pycharm社区版打开django-CSDN博客 2.Django TemplateDoesNotExist: rest_framework 当我们使用djangorestframework框架时&#xff0c;首先下载pip install djangorestframework 参考博文Django Templat…
阅读更多...
最新文章

Copyright @ 2022~2023