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)


相关推荐

  • 生物识别指纹_生物指纹识别技术

    生物识别指纹_生物指纹识别技术锁屏要使用指纹解锁,首先要注册指纹服务,我看过的一些大厂项目中,实际上是在KeyguardUpdate.java类中发起注册的,一般是根据当前状态,是不是已经处于上锁状态(侧边指纹机器,是不等上锁即进行指纹服务注册,屏下指纹需要等上锁后,才发起指纹服务注册)。………………………

  • 游戏建模自学真的能学出来吗?

    游戏建模自学真的能学出来吗?游戏建模自学肯定是能学出来的,但这有几个先决条件:1.高度的自律性2.时间,你得有一定的空闲时间用于学习和练习,全日制的同学们每天从早上8/9点钟一直到6点过7点都在学习、做作品,可能回家之后还在练习,一天花在建模上的时间比8个小时只多不少,所以你肯定不能指望着每天一两个小时的练习时间就能突飞猛进成为大佬(除非你有基础且天赋异禀,这个另当别论)3.有人指导帮你找出你的问题并给出改正方案最后,不可否认确实有部分同学可以通过自学入行,也确实会有很多人出于各种各样的原因觉得培训班不靠谱想自学,

  • ConcurrentHashMap实现原理及源码分析

    ConcurrentHashMap实现原理及源码分析一、ConcurrentHashMap跟HashMap,HashTable的对比HashMap不是线程安全:在并发环境下,可能会形成环状链表(扩容时可能造成,具体原因自行百度google或查看源码分析),导致get操作时,cpu空转,所以,在并发环境中使用HashMap是非常危险的HashTable是线程安全的:HashTable和HashMap的实现原理几乎一样,差别:1.Ha…

  • C++ 中的getline()函数用法详解

    C++ 中的getline()函数用法详解    遇到了要输入一行字符串的操作,我想除了fgets()的方法(fgets()用法链接),getline()也是可以的,但是我对getline的操作不熟悉,便查阅了很多资料,发现都说的很模糊,借这个机会我想彻底理清楚getline的用法;  网上有说getline有两种用法的,我在这总结一下,一、getline()用的比较多的用法 1) istrea…

  • java流操作对文件的分割和合并

    学习文件的输入输出流,自己做一个小的示例,对文件进行分割和合并。

发表回复

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

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