webpack(4)webpack.config.js配置和package.json配置[通俗易懂]

webpack(4)webpack.config.js配置和package.json配置[通俗易懂]前言上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包webpack.config.js首先我们创

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包
 

webpack.config.js

首先我们创建一个js文件webpack.config,当期我们配置最简单的导入导出,代码如下:

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

现在我们使用打包命令时,不用再跟上打包文件地址等等参数,只需输入如下命令

webpack --mode development

这样我们就会将文件打包到dist文件夹下
 

package.json

一般开发前端项目,我们都会使用npm init进行初始化项目,会生成一个package.json文件
 

为什么要使用npm init初始化项目

node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方,对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。
 

npm init -y

接着我们在项目的根目录输入npm init -y就会生成一个package.json文件,内容如下:

{
  "name": "webpackTest2",   // 项目名字
  "version": "1.0.0",              // 项目版本
  "description": "",              // 项目描述
  "main": "webpack.config.js",   // 项目入口
  "scripts": {                      // 项目脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],               // 项目关键字
  "author": "",                  // 作者
  "license": "ISC"            // 项目证书
}

 

本地安装webpack

一般我们开发阶段,安装项目需要依赖的环境都使用--save -dev

  • --save:本地安装
  • -dev:开发时依赖,也就是开发阶段使用的依赖包

接着使用命令本地安装webpack

npm install webpack --save-dev

安装成功后,重新打开package.json,会多出如下代码

"devDependencies": {
    "webpack": "^5.44.0"
  }

这就是开发时依赖,开发环境中依赖webpack5.44.0的版本
 

通过npm来打包webpack

最后我们不希望在命令行输入webpack来打包,我们希望使用npm来打包,我们只需要在package.json中的script中,添加如下命令

"scripts": {
    "build": "webpack --mode development"
  },

之后我们打包,只需要在终端输入npm run build就可以自动打包了
 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165387.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python中字符串类型转换为数字类型_python字符串转int

    python中字符串类型转换为数字类型_python字符串转intstr与inti=10s=str(i)#s=’10’s=’1’i=int(s)#i=1str与floatst=’.4’t=float(st)#t=0.4st=’0.4’t=float(st)#t=0.4t=0.4st=str(t)#st=’0.4’注意把字符串转换为数字类型时,…

  • 【解决】E: 无法获取 dpkg 前端锁 (/var/lib/dpkg/lock-frontend)「建议收藏」

    【解决】E: 无法获取 dpkg 前端锁 (/var/lib/dpkg/lock-frontend)「建议收藏」【解决】E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend),是否有其他进程正占用它?1常用两个方法https://blog.csdn.net/qq_38019633/article/details/840243092以上不行时候,用这种更新软件库sudoapt-getupdate继续进行安装解决…

  • 剑指 Offer 06. 从尾到头打印链表(链表)

    剑指 Offer 06. 从尾到头打印链表(链表)输入一个链表的头节点,从尾到头反过来返回每个节点的值(用数组返回)。示例 1:输入:head = [1,3,2]输出:[2,3,1]限制:0 <= 链表长度 <= 10000题解链表/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode(int x) : val(x), next(NULL) {} *

  • 虚拟机中安装GHO文件配置说明[通俗易懂]

    虚拟机中安装GHO文件配置说明[通俗易懂]虚拟机安装系统的配置说明(GHO文件)

  • mac 安装ll命令[通俗易懂]

    mac 安装ll命令[通俗易懂]mac安装ll命令mac-bash:ll:commandnotfound在linux系统下我们经常使用ll、la命令。但在mac系统时缺没有。提示:-bash:ll:commandnotfound。这是因为ll、la不是真的命令,而是一些常用命令和参数搭配的别名。所以我们在MacOS下配置下就好了。1、跳到个人目录下面localhost:~huangfy20$cdlocalhost:~huangfy20$pwd/Users/huangfy202、打开.bash

  • STM32开发笔记37: 485总线的收发切换时间_STM32库开发实战指南:基于STM32F4

    STM32开发笔记37: 485总线的收发切换时间_STM32库开发实战指南:基于STM32F4架构图带位操作原理以往我们在使用暂存器时,都是在操作该暂存器32bits(4bytes)的储存地址,要对其中单一bit进行操作,可以仰赖bitoperation来完成。而bit-banding(位带操作)的目的就是实现直接操作单一比特位为了达成这个目的首先我们有必要理解STM32的特殊存储区段位带区与位带别名区。下图中的红色方框代表位带区的范围,可以看到SRAM中位带区佔有1MB,外设区段部分,1MB的储存范围刚好涵盖了AHB,APB1,APB2,可以说我们使用的大部分外设,例如GPIO,

    2022年10月13日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号