webpack安装步骤

本文详细介绍了webpack的安装过程,包括基于node.js的环境设置、使用npm初始化项目、配置package.json、创建资源目录及源文件、编写webpack.config.js配置文件,以及最后的打包运行步骤。通过这些步骤,读者可以学会如何在开发环境中设置webpack。

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

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS、coffee、样式(含css/less/sass)、图片等作为模块来使用和处理。

可以直接使用require()语法的形式来引入各模块,即使它们可能需要经过编译(如jsx和sass),但我们无需在上面话费太多心思,因为webpack有着各种健全的加载器(loader)会默默处理。

webpack安装与配置

1、webpack是基于node.js的,所以先在node.js官网下载node.js并安装。

2、在控制台通过npm init会自动生成package.json文件,有关提示的version、description等信息一路点击enter(默认即可),在package.json文件中的scripts中添加“dev”:"webpack",注意必须用""括着,用于后面进行webpack打包运行。


具体通过下面例子对是否安装成功进行测试
3、打开控制台找到项目所在目录,在控制台通过 npm i -D webpack(或npm i -D webpack@3  安装3.0的最新版本)安装开发时的webpack依赖,此时会生成一个node_modules文件,node_modules中的文件一般不需要修改,注意,如果是最新版本的4.0的webpack需要通过 npm i -D webpack-cli 来安装webpack-cli。

4、一般新建的项目内容为空,创建一个资源目录src,在src中出创建app.js a.js文件。

a.js文件内容如下:

//ES6语法  导出这个方法
export default function a() {
    console.log('a function');
}

在app.js中引入a.js并使用,具体写法如下:

import a from './a.js'//路径必须是相对根目录的

a();

5、在项目中创建webpack.config.js配置文件,用于配置入口文件和输出文件等相关信息,由于是开发环境并在webpack.config.js中配置mode:"development"。

6、新建文件夹dist用于存放输出文件并在dist中创建index.html文件用于执行。

7、在控制台通过npm run dev 运行文件打包,会在dist生成app.js文件,在dist中的index.html中引入app.js文件,将dist中的index.html在浏览器运行,如图运行成功则安装成功。








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值