webpack安装与基本配置(一)

本文详细介绍如何使用Webpack进行项目构建,包括全局安装、初始化配置、安装CLI、配置环境及运行命令等关键步骤,助你轻松上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1)安装webpack

1.全局安装webpack
命令: npm install webpack -g

2. 初始化 package.js文件
命令: npm init -y ====> 运行之后,在src下会自动新建一个package.json的文件;

在这里插入图片描述

3. 安装webpack到package.json文件中。
命令 : npm install webpack --save-dev ====>运行之后,该文件夹下会自动生成一个node_modules的文件夹,以及package-lock.json文件;

在这里插入图片描述

4. webpack 4.0以及之后的版本还需要安装 webpack-cli(目前3相对比较稳定,3不需要安装这些)
命令: npm i -D webpack-cli

5. 配置环境 在webpack.config.js文件的module.export中配置生产环境和开发环境的相关属性(4.0以上的版本)

mode:" development " ( development:开发环境 production:生产环境)**


2)在src目录下新建一个webpack的配置文件叫做webpack.config.js

说明:

这个文件名可以修改,但是跟配置webpack运行的属性值直接相关,否则会报错


项目结构:
在这里插入图片描述

3)配置 webpack.config.js 文件

代码如下

 	const path = require('path');
 	module.exports = {   
 		entry:"./src/main.js",      //即项目入口文件的路径,
 		output:{                //a.生成的新的js文件会存在在哪个位置
 		
 		  //这里需要一个绝对路径,因此引用了path这个模块  
 		  // __dirname代表项目的总目录(src的上级目录),dist是文件导出后所要存在的文件夹名
 			 path: path.resolve(__dirname,'dist') ,  
 			         
 			filename:"main.js"   	//b.生成的新的js文件叫什么名字
 			    }
 			};
 			
 	/*module.exports是node.js的语法 ,这里就是webpack的配置 :
 	比如webpack会以书面方式来打包,打包的过程中它会做一些什么事情
    在这个导出对象中,至少需要设置两个属性: 
  entry: 这个就是我们整个项目的入口,找到入口文件之后他会打包出一份新的文件,
  所以还需要设置一个关于出口文件(output)的属性*/

4)配置webpack运行命令

在package.js文件中找到 scripts属性,添加 “dev” : "webpack"
这块默认运行webpack.config.js这个文件,配置好之后,就可以直接用命令行运行了
命令: npm run dev
运行之后,在我们设置的dist(运行webpack之后,新生成文件所存放的文件夹)文件下,就可以看到我们打包好新生成的js文件了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值