广告
返回顶部
首页 > 资讯 > 前端开发 > html >webpack4.x如何打包
  • 488
分享到

webpack4.x如何打包

2024-04-02 19:04:59 488人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关webpack4.x如何打包,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、全局安装 webpack-cli 脚手架npm ins

这篇文章将为大家详细讲解有关webpack4.x如何打包,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

一、全局安装 webpack-cli 脚手架

npm install WEBpack-cli -g

二、新建一个项目wp,并在wp目录下初始化一个package.json文件。

npm init -y

在wp目录下新建一个src目录,并在该目录下新建一个index.js 作为入口文件

webpack4.x如何打包

webpack4.x 给我们提供了两种打包模式:

development开发模式
production 为生产模式,打包出的 main.js 代码自动压缩

我们可以直接使用命令 webpack --mode development 进行开发模式打包

webpack4.x如何打包 

webpack4.x如何打包 

我们使用生产模式webpack --mode production 打包

webpack4.x如何打包 

此时代码已经被压缩。

不管哪种模式,我们每次打包都使用 webpack --mode development 或者 webpack --mode production 都有点麻烦,我们可以修改下package.JSON文件里面的 scripts 属性:

"dev": "webpack --mode development",
"build: "webpack --mode production"

最后我们就可以使用 npm run dev 进行开发模式打包,使用 npm run build 进行生产模式打包。

关于“webpack4.x如何打包”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: webpack4.x如何打包

本文链接: https://www.lsjlt.com/news/78623.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • webpack4.x如何打包
    这篇文章将为大家详细讲解有关webpack4.x如何打包,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、全局安装 webpack-cli 脚手架npm ins...
    99+
    2022-10-19
  • babel7.x和webpack4.x如何配置vue项目
    小编给大家分享一下babel7.x和webpack4.x如何配置vue项目,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.webpack 4.x 插件 extract-text-webp...
    99+
    2022-10-19
  • 如何解决webpack4 css打包压缩问题
    这篇文章将为大家详细讲解有关如何解决webpack4 css打包压缩问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。这两天一直在练习这个webpack4, 发现有好多问...
    99+
    2022-10-19
  • webpack4如何打包vue前端多页面项目
    这篇文章主要介绍webpack4如何打包vue前端多页面项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.用法项目结构如下:project  |- bulid...
    99+
    2022-10-19
  • rollup3.x+vue2打包组件如何实现
    今天小编给大家分享一下rollup3.x+vue2打包组件如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。包的依赖关系...
    99+
    2023-07-05
  • webpack3.X中如何实现多页面打包
    这篇文章将为大家详细讲解有关webpack3.X中如何实现多页面打包,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。单页面打包我们知道要打包单页面的方法,很简单,配置入口,...
    99+
    2022-10-19
  • rollup3.x+vue2打包组件的实现
    目录包的依赖关系@rollup/plugin-babel 版本说明5.2.1  配置babel的写法6.0.3 配置jsx的写法6.0.3 package.json清单问题...
    99+
    2023-03-22
    rollup vue2打包组件 vue打包组件
  • webpack4如何迁移
    这篇文章给大家分享的是有关webpack4如何迁移的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.x到2.x这次升级跨度比较大,我们是从webpack1.x升级到4.x,因为1...
    99+
    2022-10-19
  • webpack4 react报错如何解决
    这篇文章主要介绍“webpack4 react报错如何解决”,在日常操作中,相信很多人在webpack4 react报错如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”webpack4 react报错如...
    99+
    2023-07-04
  • webpack4是如何处理css的
    这篇文章主要介绍“webpack4是如何处理css的”,在日常操作中,相信很多人在webpack4是如何处理css的问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”webpac...
    99+
    2022-10-19
  • cocos creator 3.x打包构建原生安卓APK流程(打包release版本,修改APP图标)
    本文介绍cocos creator 3.x如何打包构建原生安卓APK,一开始是按照官网构建示例操作的,发现存在各种SDK版本问题,因为对原生Android没什么研究只能瞎琢磨,最后勉强算是打包出来了…...
    99+
    2023-09-02
    android 游戏引擎
  • Python3.x+pycharm+Anaconda中缩小打包的.exe体积的问题
    问题: 在python3.x的pycharm环境下,打包程序的时候经常会发现打包的.exe文件体积过大,经常会达到300M以 上。且经常出bug。 ​ 在网上翻阅了许多...
    99+
    2022-11-12
  • uniapp如何打包
    随着移动互联网的发展,越来越多的企业和个人开始关注移动应用的开发与推广。相信很多开发者选择了uniapp作为自己的开发框架,因为它可以一次编写代码,同时支持多端运行。但是,开发出来的uniapp需要打包才能转换成最终可用的APP。本文将详细...
    99+
    2023-05-21
  • java如何打包
    java如何打包一、手动打可直接执行的jar包1) 先使用javac编译java文件,得到class文件2) 新建文件,名字任起,比如可以叫manifest,内容如下Manifest-Version: 1.0 Main-Class: add...
    99+
    2019-07-03
    java基础 java 打包
  • java 如何打包
    首先要确认自己写的程序有没有报错。第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建的是java Project。打包步骤:在项目上,右键,选择Export。进入到下图界面,选择Java下面的JAR file。选择...
    99+
    2020-04-25
    java入门 java 打包
  • Webpack如何打包
    这篇文章给大家分享的是有关Webpack如何打包的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。准备工作mkdir webpack_demo &&...
    99+
    2022-10-19
  • vuecli3.x打包后如何修改生成的静态资源的目录和路径
    目录vue cli3.x打包后修改生成的静态资源的目录和路径vue3.3打包后,路径出错问题vue cli3.x打包后修改生成的静态资源的目录和路径 在vue cli 2.x版本修改...
    99+
    2022-11-13
  • java中如何打包成jar包
    一、手动打包可直接执行的jar包1)先使用javac编译java文件,得到class文件;2)新建文件,名字任起,比如可以叫manifest,内容如下(注意:1. 冒号后面加一个空格,2. 最后必须回车到新的空行,否则出错,如下面内容就必须...
    99+
    2022-02-12
    java基础 java 打包 jar包
  • 如何使用Idea打包jar包
    小编给大家分享一下如何使用Idea打包jar包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、创建项目创建一个简单的Java项目,其中Main.java为主函数...
    99+
    2023-06-15
  • webpack如何打包js
    这篇文章主要为大家展示了“webpack如何打包js”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“webpack如何打包js”这篇文章吧。Webpack 是一个...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作