搭建webpack项目

概述

webpack是一个现代javaScript应用程序的静态模块打包器。当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。
它的出现是由于现代web开发越来越复杂,如果还是像原来那样把所有的js代码都写到一个文件中,维护非常困难。

创建一个崭新的文件夹

在这里插入图片描述

使用命令创建一个package.json文件

(创建时需要输入很多参数,分别是1、项目名称,2、迭代版本,3、项目说明,4、主入口文件,5、封装的可执行命令,6、作者,7、源协议名称)

输入命令 npm init
在这里插入图片描述

安装webpack依赖及项目依赖

npm install webpack -g
npm install webpack-dev-server
npm install webpack-cli

在安装过程中,每个依赖的版本很重要,防止出现两个不兼容的版本
完成之后package.json大概是这个样子,说明安装成功

其中,要在scripts模块下,添加dev和start
在这里插入图片描述

创建相关页面并配置webpack.config.js

创建相关页面
在这里插入图片描述

webpack.config.js的配置
在这里插入图片描述
index.html

标记文本
在这里插入图片描述

index.js

在这里插入图片描述

启动

输入命令 npm start

在这里插入图片描述
启动成功,查看页面

在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack一个现代 JavaScript 应用程序的静态模块打包器。它会将应用程序所有的依赖项打包到几个静态资源(bundle)中。搭建一个基于 Webpack项目,主要包括以下几个步骤: 1. 安装 Node.js 和 npm 在开始之前,确保你的电脑上已经安装了 Node.js 和 npm(Node.js 的包管理工具)。你可以在 Node.js 官网下载并安装它们。 2. 初始化项目 在命令行中,进入项目文件夹,执行以下命令初始化项目: ``` npm init -y ``` 这个命令会创建一个 package.json 文件,其中包含了项目的基本信息和依赖项列表。 3. 安装 webpackwebpack-cli 执行以下命令安装 webpackwebpack-cli: ``` npm install webpack webpack-cli --save-dev ``` 其中 `--save-dev` 表示将这两个包添加到开发环境依赖中。 4. 创建 webpack 配置文件 在项目根目录下创建一个名为 `webpack.config.js` 的文件,这个文件是 webpack 的配置文件,其中包含了 webpack 的各种配置选项。一个简单的配置文件如下: ```js const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` 其中,`entry` 表示入口文件,`output` 表示输出文件。这个配置文件的含义是将 `src/index.js` 打包成 `dist/bundle.js`。 5. 创建入口文件和 HTML 文件 在项目根目录下创建一个名为 `src` 的文件夹,在其中创建一个名为 `index.js` 的文件,这是应用程序的入口文件。同时,创建一个名为 `index.html` 的文件,这是 HTML 页面的模板。 6. 安装 webpack-dev-server 执行以下命令安装 webpack-dev-server: ``` npm install webpack-dev-server --save-dev ``` 7. 配置 package.json 在 `package.json` 文件中添加以下内容: ```json "scripts": { "start": "webpack-dev-server --open" }, ``` 这个配置表示执行 `npm start` 命令时,会启动 webpack-dev-server,并自动打开浏览器访问页面。 8. 运行项目 执行以下命令启动项目: ``` npm start ``` 这个命令会启动 webpack-dev-server,并自动打开浏览器访问页面。你可以修改入口文件和 HTML 文件,查看 webpack 自动重新打包的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值