webpack简介

已于 2023-04-04 15:26:40 修改
阅读量100 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端 javascript
于 2023-04-03 23:15:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48237530/article/details/129941036
版权

  • 安装webpack、webpack-cli

#初始化项目
npm init 或者 yarn init
#安装webpack webpack-cli
npm i webpack webpack-cli -g

  •  打包以一个应用

目录下新建index.js 和 addContent.jsxi

#index.js
import addContent from "../add-content.js"
document.write('My First webpack app</br>')
addContent()

#addContent.js
export default ()=>{
    document.write("hello word")
}

新建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>
 
</body>
<script src="./dist/build.js">

</script>
</html>

  •  打包命令

npx webpack --entry=./index.js --output-filename=build.js --mode=development

参数解析：

        entry:资源打包入口。webpack从这里开始进行模块依赖的查找。得到项目中包含index.js和add-content.js两个模块，并通过他们生成最终产物。

        output-filename:输出资源名。你会发现打包完成后工程中出现了一个dist目录，其中build.js就是webpack最终产物.

        mode:打包模式。webpack提供了development、production、none三种模式。当置于development和production模式下时，它会自动添加适合与当前模式的一系列模式。

为了验证打包结果，浏览器打开index.html项目中的index.js和content.js现在已经成为了build.js,被页面加载和执行，并输出了内容。

  • 使用npm script

每次打包都输入一段很长的命令。这样不仅耗时还容易出错，我们可以在package.json中添加一段脚本命令 

"scripts": {
    "build":"webpack --entry=./index.js output-filename=build.js mode=development"
  }

运行npm run build 重新执行打包

  •  使用默认配置项

在工程中webpack 的默认的源代码入口就是src/index.js因此可以省略掉entry的配置了

"scripts": {
    "build":"webpack output-filename=build.js mode=development"
  }

  •  使用配置文件

 从之前我们在package.json 中添加脚本命令来看，当项目需要越多越多的配置时，就要往命令中添加更多的参数，那么后期维护就很困难，为了解决这个问题，可以把这些参数专门放在一个配置文件中，webpack的默认配置文件为webpack.config,js,现在让我们在工程目录下创建webpack.config.js文件并添加如下代码 a

module.exports={
    entry:"./src/index.js",
    output:{
        filename:"build.js"
    },
    mode:"development"
}

现在我们可以去掉package.json中的配置打包参数了

"scripts": {
    "build":"webpack"
  }

佛系cv
关注
专栏目录
Webpack Webpack简介
SillyBoy的博客
07-06 265
webpack简介 从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 模块（模块化开发，可以提高开发效率，避免重复造轮子） 打包（将各个模块，按照一定的规则组装起来） 官网：https://webpack.js.org/ 特点： 功能强大（打包、构建、发布web服务） 学习成本高 功能 有好的模块化支持。 合并打包多个文件，减少http请求次数，提高效率。 编译代码，确保浏览器兼容性。 压缩代码，减少文件体积，提高加载速度。 监测代码格式
【Webpack 简介及五个核心概念】
圆圆的 JavaScript 博客
08-15 3651
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
webpack 简介
QZ9420的博客
06-03 307
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。Loader 让 webpack 能
Webpack简介
qq_49691639的博客
01-09 278
1、webpack是什么？ webpack是一个现代的js静态模块打包工具，当webpack出来应用程序， 会在内部生成一个依赖映射到每个模块，并生成一个或多个bundle（包） 配置webpack需要写在webpack.config.js中 2、安装webpack 初始化npm包文件 npm i -y 生成package.json 安装 npm i webpack --save-dev 最新版功能无法实现时推荐使用其他版本 如 webpack@4.42.0 安装
Webpack 简介
编程三昧
06-15 541
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。 Webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的构建工具，是现代 Web 开发必须掌握的技能之一。 背景 在当下的前端环境里，各种框架和工具层出不穷，比如 React、Vue、Angular 等，极大的提高了我们的开发效率，但是，他们都有一个共同点：源代码无法直接运行，必须经过转换之后才可执行。 而转换代码.
Webpack简介（一）
qq_42855675的博客
02-07 1399
文章目录什么是webpackwebpack的五个核心概念1.Entry：入口2.Output：输出3.Loader：翻译非JavasScript文件4.Plugins：插件5.Mode：模式--指示webpack使用相应的模式的配置Webpack初体验 什么是webpack      前端资源构建工具，一个静态资源打包器。      构建工具：一种将less,jquery,等语法编译成浏览器可以识别的css/
webpack-intro:Webpack简介-2015年塔尔萨技术节
05-15
Webpack简介 我们将专注于使用webpack来帮助组织复杂的前端项目的构建过程。 webpack是基于nodeJS的工具，可与commonJS和requireJS模块格式系统一起使用。 我们将讨论的主题： Webpack的工作原理 了解装载机 添加一...
自动化构建工具——2.webpack简介
yoliu的博客
06-03 265
webpack简介 webpack 是什么 ？ webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 资源构建工具：就是将前端一系列需要做的小操作整合成一个大的工具，他一次性能干完，这样的工具就叫构建工具，Webpack就是构建工具中的一种。 静态模块打包器： 很多要引
webpack_react
09-18
### 一、Webpack 简介 Webpack 是一个静态模块打包工具，它的核心概念是“模块”。在 Webpack 看来，任何能被导入（import）的文件都是一个模块，包括 JavaScript、CSS、图片等。Webpack 通过配置文件（webpack....
【Vue 全家桶】2、Vue 组件化编程
椰子的职场成长记录
11-05 208
【代码】【Vue 全家桶】2、Vue 组件化编程。
Vue&SSR详解 VueServerRenderer Nutx
警警的博客
10-31 1110
服务器端渲染（SSR, Server-Side Rendering）是一种在服务器上生成完整的 HTML 页面，然后将其发送到客户端的技术。Vue Server Renderer Nutx
10天进阶webpack---（2）webpack模块兼容性处理
weixin_73303171的博客
11-05 270
ESM除了我们熟知的静态导入，动态导入(返回一个Prmise)，还有一个比较奇特的特性，符号绑定，也就是说无论你导出的是一个对象还是一个基础类型的变量他们都是一块内存空间，并且导出的类型是常量。所以我们平时在node环境上书写的代码其实是在运行在一个函数中的，我们使用的。如果导出和导入使用的是同一种模块化标准，打包后的效果就是标准的的模块化。函数其实也是函数的参数了，我可以在node环境中打印一下。不同的模块化标准，webpack按照如下的方式处理。必然是动态导入的，我们可在任何位置使用。
多平台编包动态引入依赖的解决方案
最新发布
Ranye的博客
11-05 479
A 平台需要引入一个依赖，B 平台却是不需要的，那么面向 B 平台打包的时候把依赖装进去自然就不大合适。最好的方法是动态引入依赖，根据平台来判断要不要引入。
webpack的常见配置
Sherry Tian的博客
11-05 230
webpack的常见配置
webpack使用详解
weixin_61933613的博客
11-02 836
webpack作为一款主流的构建工具，对比后来者Vite虽然存在一些缺点，例如启动慢，配置复杂等。在很多项目中使用依然基于webpack构建，有必要掌握其概念、构建流程和配置方法。水平有限欢迎补充指正
前端项目配置文件的各种配置
jxnd123456的博客
11-04 613
通过配置文件，可以根据项目的特定需求来定制构建和运行过程。不同的项目可能有不同的构建目标、环境设置和优化需求，配置文件允许开发者灵活地调整这些参数。例如，一个大型企业级应用可能需要更严格的代码压缩和优化，而一个小型个人项目可能更注重开发效率和快速迭代。配置文件可以让开发者根据项目的实际情况进行调整。
除了Vue CLI，还有哪些方式可以创建 Vue 项目？
Front end development engineer
10-31 516
是的，除了使用 Vue CLI 之外，还有其他几种方式可以创建 Vue 项目。
element-plus按需引入报错IconsResolver is not a function
Beamon__的博客
11-05 427
Element Plus Best Practices 最佳实践. Contribute to sxzz/element-plus-best-practices development by creating an account on GitHub.运行结果：TypeError: IconsResolver is not a function。解决方式：安装低版本unplugin-icons。
Webpack整合Bootstrap实战指南
1. webpack简介 webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。它分析项目结构，识别出各模块间的依赖关系，然后将这些模块按照指定的规则打包成一个或多个包（bundle）。webpack的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值