webpack怎样打包js

最新推荐文章于 2024-05-15 01:33:12 发布
最新推荐文章于 2024-05-15 01:33:12 发布
阅读量894 收藏 2
点赞数
分类专栏： webpack 文章标签： webpack打包js文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/102473761
版权
本篇博客介绍了如何使用webpack打包js文件。首先，需要安装webpack和webpack-cli，接着新建js文件和webpack.config.js配置文件。在webpack.config.js中，通过entry指定要打包的文件，output设置输出路径和打包后的文件名。使用path模块处理路径，并通过module.exports导出配置。执行`webpack -p`命令即可完成打包，生成的文件位于dist目录下。
摘要由CSDN通过智能技术生成

首先要在自己电脑安装webpack和webpack-cli然后才可以接着下面的操作。

安装之后
新建一个js文件，和一个webpack.config.js

接下来我们就打包这个新建的js文件（我这里是a.js）

webpack.config.js是webpack的配置文件，当执行webpack命令的时候会去读取这个文件里面的配置信息




a.js内容很简单，就是一个输出而已


webpack.config.js内容则比较多

引入path模块，这个是node相关的模块，可以获取当前的文件夹路径，不熟悉可以去网上搜索看看哦
然后用module.exports来导出

导出的是一个对象，里面有很多属性，先说最基本的
entry 表示的是你要打包哪些文件，这里我就是要打包a.js
output 表示的是你要把文件打包之后放到哪里
这里我就是放到当前目录下的dist目录下
path 就是指明存放的路径
filename 则是打包之后文件的命名 这里我就命名为66.js

最低0.47元/天 解锁文章
woshidamimi0
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解如何使用webpack打包JS
01-19
如何使用webpack打包JS 我们在命令行中输入：webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output webpack-cli [options] <entries> --output ...
webpack打包一个js代码做为一个js库文件当做插件来使用。
阿牛哥的博客
07-20 560
UMD 模块在不同的环境中可能有不同的全局对象，因此直接使用这些全局对象可能导致在某些环境中出现 “self is not defined” 错误。出现 “self is not defined” 错误通常是因为在使用 UMD 格式的模块时，代码中出现了类似 self 或 window 的全局对象的引用，但是在某些环境中（如 Node.js 等）并没有定义这些全局对象。场景，假如你写了一个js文件。存在一个全局的库的名字，通过webpack的配置名字，他将所有的导出的函数绑定在个和库对象上。
Webpack学习：基本使用-打包简单的js文件
weixin_47295886的博客
03-21 1665
/src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。使用index.html 引入main.js 此时会报错，es6模块化浏览器不识别 会报错。浏览器不支持es6模块化，使用webpack ,将文件进行编译 编译成浏览器可以识别的语法。生产模式：能编译 JS 中的 ES6模块化 语法，还能压缩 JS 代码。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件。main.js:项目主文件 打包的入口文件 导入。
Webpack4 创建项目以及打包一个JS文件
最新发布
2301_78416672的博客
05-15 795
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
学习使用webpack打包（打包css和高级js）
weixin_44022194的博客
07-05 983
学习使用webpack打包工具 一、概念 1.什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 2.webpack的作用 通过webpack打包可以将如图左边浏览器不能识别的文件打包转换为右边可识别的js、css等文件。 当然它的功能还
【Webpack5笔记】处理打包各种资源（css资源、less资源、图片资源、字体图标、js资源（ESlint和Babel）、html资源）
qiaoyangla的博客
05-30 684
webpack中文文档webpack 中文网 首先安装css-loader npm install --save-dev css-loader 想要webpack打包资源，需要在主文件中引入css文件 import css from 'file.css'; 在webpack.config.js中，因为使用了style-loader，也需要安装 npm install style-loader module.exports = { module: { rules: [ .
webpack5打包原理及应用（静态资源篇）
weixin_46248051的博客
04-02 2099
webpack5打包原理及应用（静态资源篇） file-loader 使用 首先记得安装file-loader 🚀 通过创建一个元素，设置其src属性引入图片 // 新建一个pack-image.js文件如下： function packImg () { // 创建容器对象 const containerElement = document.createElement('div'); // 创建img标签 设置src属性 const imgElement = documen
webpack 单独打包指定JS文件的方法
10-18
在本文中，我们将深入探讨如何使用Webpack单独打包指定的JavaScript文件。这通常是为了特定的需求，例如将配置文件或依赖项独立出来，以便于部署时进行调整。以下是一种实现这一目标的方法： 1. **配置文件设置**：...
webpack打包js的方法
10-18
主要介绍了webpack打包js的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack dll打包重复问题优化的解决
10-17
webpack DLL打包重复问题的优化主要涉及到在使用webpack的DllPlugin时，如何避免生成的DLL包中包含重复的代码。DLL（Dynamic Link Library）打包是为了提高构建速度，它将常用的库预先打包成一个独立的文件，后续的...
webpack打包js，css和图片
09-15 207
1、webpack打包默认配置文件webpack.config.js 2、打包js文件：有这个文件并配置可以直接在cmd上webpack打包，没有这个文件要在cmd上输入 webpack main.js build.js 3、打包css文件：要在cmd上输入npm install style-loader css-loader 安装 module.exports={ ...
webpack这样打包图片资源，你会吗？webpack打包图片资源
前端小白的逆袭
11-27 1729
webpack这样打包图片资源，你会吗？webpack打包图片资源
Webpack打包图片-JS-Vue文件
凉茶铺的博客
01-12 3843
介绍了webpack如何打包图片等静态资源、如何使用label打包js、如何打包vue文件，最后介绍了在webpack中如何配置扩展名和别名。
【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
热门推荐
寒泉
02-02 6万+
webpack和node和npm的关系 项目中一般有两个文件夹： src，dist（distribution）
webpack5打包样式文件、html、jsx中的图片
qq_45327886的博客
03-21 697
webpack5 打包图片 图片无法正常打包 [object%20Module]
使用webpack打包js（详细）
JAY203916的博客
03-09 905
webpack打包js文件
webpack系列之：手把手教你 打包和使用js文件
u010206379的博客
11-16 599
可以先看一下最后的项目情况，然后我们再开始一步步操作。
0706学习日志：webpack打包简单的js项目超详细步骤（包含报错解决）
opoqou的博客
07-06 1546
webpack打包简单的js项目超详细步骤（包含报错解决）
Webpack4 创建项目以及打包一个JS文件，双非渣本前端四年磨一剑
2401_83977626的博客
04-04 1176
6、在 webpack 文件夹里新建一个 webpack.config.js，文章底部有 webpack.config.js 配置详解，初始化它的内容：7、在当前 webpack 目录创建一个 main.js (文件名随意) 文件，main.js 文件文件里面随便放点内容8、创建好 main.js 之后，我们需要配置一下 webpack.config.js// 入口文件entry: {},// 输出配置output: {// 输出得到的文件，文件名可以随意写。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值