webpack配置文件_webpackconfig.js详解

webpack配置文件_webpackconfig.js详解前言上一篇文章我们使用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/164850.html原文链接:https://javaforall.cn

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

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

(0)


相关推荐

  • java局域网发送文件_Java如何实现局域网文件传输代码案例分享

    java局域网发送文件_Java如何实现局域网文件传输代码案例分享这篇文章主要介绍了java实现局域网文件传输的实例的相关资料,这里提供了实现代码可以帮助大家理解TCP及文件读写的知识,需要的朋友可以参考下java实现局域网文件传输的实例本文主要实现局域网文件传输的实例,对java的TCP知识,文件读写,Socket等知识的理解应用,很好的实例,大家参考下,实现代码:ClientFile.java/***更多资料欢迎浏览凯哥学堂官网:http://kai…

  • Eclipse创建Java Web项目时,没有自动生成web.xml文件

    Eclipse创建Java Web项目时,没有自动生成web.xml文件今天创建动态Web项目时,发现WEB-INF下面没有自动生成web.xml配置文件。解决方案:        1)方法一:            File—>新建动态项目出现如下图,这时候不要急于Finish,请点击next—>出现如下图—>继续Next出现如下图,请选择对勾。创建好的项目,WEB-INF下面就有Web.xml文件。  方法二:在Tomcat安装包里面…

  • UCI数据集整理(附论文常用数据集)

    UCI数据集整理(附论文常用数据集)摘要:UCI数据集作为标准测试数据集经常出现在许多机器学习的论文中,为了更方便使用这些数据集有必要对其进行整理,这里整理了论文中经常出现的数据集,并详细介绍如何使用MATLAB将数据集文件整理成自己需要的格式以及如何使用数据集文件。要点如下UCI数据集介绍用程序整理数据集如何使用数据集文件点击跳转至UCI数据集下载页1.前言UCI数据集是一个常用的机器…

  • NPM设置淘宝镜像命令

    npmconfigsetregistryhttp://registry.npm.taobao.org/转载于:https://my.oschina.net/hlhgo/blog/…

  • es6 模板字符串_模板字符串如何实现

    es6 模板字符串_模板字符串如何实现es6的模板字符串个人觉得是很好用的,尤其简化了字符串拼接这块,下面说下它是如何使用的首先,模板字符串是增强版的字符串,使用反引号“来包括字符串,如果需要拼接上变量,那拼接的格式是使用${}包裹变量即可举个例子看下最基本的用法,可以看出来跟普通字符串拼接比较起来简洁容易了很多2:模板字符串的另一优点是,空格和缩进都会保留在输出中,之前的字符串换行的话需要拼接换行符,缩进需要使用缩…

  • 局域网与广域网详解区别_广域网有哪些

    局域网与广域网详解区别_广域网有哪些1.局域网  局域网,英文名字LocalAreaNetwork,缩写为LAN。是指在某一区域内由多台计算机互联成的计算机组。一般是方圆几千米以内。局域网是封闭型的,可以由办公室内的两台计算机组成,也可以由一个公司内的上千台计算机组成。生活中我们的每一个学校、公司都是一个局域网局域网可以理解为我们自己使用路由器、交换机组成的内部网络这个网络实现的是内部机器的通信,比如咱们访问学校的…

    2022年10月19日

发表回复

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

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