首页 前端知识 【webpack】 webpack的安装

【webpack】 webpack的安装

2024-06-08 22:06:43 前端知识 前端哥 396 627 我要收藏

一、安装webpack

1, 新建目录,执行npm init
在这里插入图片描述

1.1安装webpack到本项目(推荐)

npm i -D webpack                      //安装最新版webpack  在devDependencies下
npm install webpack-cli --save-dev   //cli的安装(如果webpack4+版本都需要安装cli,因为webpack 4将 cli 分离出来了)

1.2.1运行

start中要找到自己配置的webpack路径

  "scripts": {
    "start": "webpack ./webpack.config.js",  //优先使用本项目下的webpack
    "test": "echo \"Error: no test specified\" && exit 1"
  },

如果启动报错,显示webpack既不是内部命令,也不是运行命令,需要配置电脑环境变量,具体参考网上其他博客。

1.2安装webpack到全局

npm i -g webpack 

二、使用webpack

现在使用webpack 输出hello,webpack

2.1 新建 文件

index.html 页面入口文件

在这里插入图片描述

show.js 主要展示webpack的方法
在这里插入图片描述

main.js执行入口文件
在这里插入图片描述

webpack.config.js 配置webpack文件

path要安装
在这里插入图片描述
运行npm start
在这里插入图片描述

---------------------成功----------------------------------

bundle.js文件是一个可执行的js文件,包含依赖的两个模块main.js, show.js以及内置的webpackBootstrap启动函数

在这里插入图片描述

网页也显示成功
在这里插入图片描述

三、流程

webpack是一个打包模块化js的工具

  1. 会从main.js出发,识别出源码中的模块化导入语句,递归找出入口文件所有依赖
  2. 后将入口和其他依赖打包到一个单独的文件中
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11556.html
标签
评论
发布的文章

小米商城

2024-06-16 15:06:28

JSON转日期,变为数字串

2024-06-16 09:06:45

使用axios读取本地json文件

2024-06-16 09:06:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!