Webpack打包的三种写法

最新推荐文章于 2023-03-28 20:48:42 发布
最新推荐文章于 2023-03-28 20:48:42 发布
阅读量194 收藏
点赞数
分类专栏： vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44263363/article/details/119155601
版权

webpack打包文件可以使用全局打包或者局部打包的命令,我们在终端上直接输入webpack会执行全局的webpack进行打包,但是为了多个项目的兼容性,一般都在各个项目上进行局部打包.即使用该文件架下面的webpack指令,目前我知道的就三种方法.

局部打包

1.直接运行该文件夹下面的webpack

在这里插入图片描述

2.运用npx

npx webpack会直接使用.bin下的webpack指令.

3.修改package.json里的脚本(scripts属性)

在这里插入图片描述
然后在终端执行npm run build就能实现局部打包;在终端执行npm run build其实就和在终端执行"webpack"差不多,只不过这个webpack命令会默认找.bin下的webpack运行也就是局部的打包命令

JK.柯♂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
10-17
本文通过两种方法给大家介绍了webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件的方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
[译] Webpack——令人困惑的地方
weixin_33881140的博客
05-09 1002
原文 Webpack—The Confusing Partsissue讨论 Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。 当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为W...
webpack配置文件写法
Cao_Mary的博客
12-06 628
1.什么是webpack配置文件? 我们在打包JS文件的时候需要输入: npx webpack index.js 这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中 其实在webpack指令中除了可以通过命令行（终端）的方式告诉webpack需要打包哪个文件以外, 还可以通过配置文件的方式告诉webpack需要打包哪个文件 2.webpack常见配置 在htt...
webpack基本用法
weixin_43165676的博客
12-04 906
webpack基本用法
webpack—基础配置
weixin_47128751的博客
04-29 689
1.webpack 命令 官方解释：webpack是一个现代的JavaScript应用的静态模块打包工具。 （1）使用全局webpack webpack4以上版本 webpack-cli --entry ./app.js --output build.js webpack4以下版本 webpack --entry ./app.js --output build.js （2）使用本地webpack package.json文件中 增加下面命令，打包会优先使用项目中的webpack打包。使用默认配置
webpack打包教程
zhaoyifei01的博客
03-06 2750
webpack打包
webpack3里使用uglifyjs压缩js时打包报错的解决
12-12
环境：webpac<4的场景下，安装uglifyjs。 cnpm install uglifyjs-webpack-plugin -D 安装完毕后，去npm里查看uglifyjs...执行打包命令后报错，重新浏览文档后发现该写法只适用于webpack4，而我的环境是webpack3.x，
vue-cli webpack2项目打包优化分享
11-30
Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import ‘vue’ 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式...
详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)
12-09
webpak不仅支持打包，而且支持AMD 和 CommonJS方式来做模块化开发，所以打算尝试一下webpack来实现模块化。 3.我的需求简单，适合新上手webpack，只需要生成上线目录，实现模块化，压缩代码等等 webpack实战 webpack...
5分钟打造简易高效的webpack常用配置
12-09
webpack给前端开发带来了毋庸置疑的改变，它把JS，图片，css都作为模块处理，同时具有开发便捷，自动化，兼容AMD写法等等诸多无须赘述的优点，更令人称道的是其插件社区非常强大，对于不同的业务需求和技术需求社区...
如何使用webpack进行打包？（包括HTML、CSS、devserver、Vue、图片等）
jia嘉ioo的博客
03-28 1278
webpack打包
webpack 打包流程
张三军的博客
01-30 1万+
webpack 打包原理
WebPack打包
学渣的博客
07-29 972
一、用webpack打包 新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） 2.安装webpack $ npm install webpack --save-dev （生成node_modules文件夹） 3. 在webpack-demo下面新建一个hello.js文件 function...
工程化之webpack打包过程
weixin_52884694的博客
06-28 519
❝ 人之所以不快乐，主要是缘于过去和未来：「为过去耿耿于怀」，「为未来惴惴不安」 ❞ 大家好，我是「柒八九」。 在前期，我们开了一个关于「前端工程化」的系列文章。已经从 概念介绍 何为脚手架SourceMap 的常规概念在Webpack 中针对SourceMap的配置 构建工具 构建解决的问题包管理工具模块化常见方式 等角度进行了一些常规概念的介绍和梳理。而今天，我们选择了一个在前端范围内，占很大比重的构建工具--Webpack。 「近一年的npm下载量」 「github对应的stars」 可以
webpack版本1与版本2的若干写法区别
weixin_30725315的博客
04-10 97
2.x的环境遇到类似this._init is not a function的报错。 版本1.x的写法： resolve: { extensions: ['', '.js', '.vue'] }, module: { loaders: [ // 使用vue-loader 加载 .vue 结尾的文件 { ...
最详细的webpack说明-------教你手写webpack4.0
宋坚强大大~~
07-20 3211
随着各大技术(vue,webpack，react，微信小程序)生态越来越成熟，这也意味着我们要更加深入的去了解他们，掌握他们。比如你写vue项目，知道vue-cli。写的项目也无以伦比，但是你是否又会去了解下vue-cli到底发生了什么？或许这就是面试官要问你的问题：请手写一个webpack4.0的配置。  webpack详解 webpack是一个打包工具，他的宗旨是一切静态资源即可打包。...
webpack打包 - webpack篇
阿莹yes的博客
08-10 568
webpack 打包流程
Vue基础知识总结 9：vue webpack打包原理
热门推荐
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
Webpack基础打包
浮游的博客
06-01 3684
事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：事实上我们上面提到的所有脚手架都是依赖于webpack的： Webpack到底是什么呢？我们先来看一下官方的解释： webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；我们来对上面的解释进行拆解：下图来自webpack官网JavaScript的打包：Css的处理：资源文件img、font：HTML资源的处理：处理vue项目的SFC文
webpack打包优化
最新发布
05-25
Webpack 是一个模块打包器，它能够将各种类型的资源打包成静态资源，例如 JavaScript、CSS、图片等。在实际开发中，Webpack 打包优化是至关重要的。 以下是一些常见的Webpack打包优化： 1. 减少打包文件体积：可以通过使用 Tree Shaking、Code Splitting 等技术来减少打包文件体积。 2. 使用缓存：在开发过程中，我们可以使用缓存来提高打包速度。使用缓存可以减少不必要的文件处理，从而加快打包速度。 3. 优化 loader：loader 是 Webpack 中非常重要的一个功能，可以用于处理各种类型的文件。但是，如果 loader 处理的文件过多，会导致打包速度变慢。因此，我们可以针对不同的文件类型，选择合适的 loader，这样可以提高打包速度。 4. 使用 DllPlugin：DllPlugin 可以将一些不变的库文件提前打包成静态资源，这样可以减少每次打包时对这些库文件的处理，提高打包速度。 5. 开启多进程打包：Webpack 支持多进程打包，可以将打包任务分配给多个子进程并行处理，从而提高打包速度。 以上是常见的Webpack打包优化方法，可以根据具体项目需求，选择合适的优化方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值