【webpack】 webpack的安装

最新推荐文章于 2025-02-21 21:23:25 发布

不想起名55

最新推荐文章于 2025-02-21 21:23:25 发布

阅读量3.8k

点赞数 1

分类专栏： WebPack 文章标签： webpack javascript 前端 node.js npm

本文链接：https://blog.csdn.net/2201_75499330/article/details/130144271

版权

WebPack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在项目中安装webpack，包括在devDependencies下局部安装和全局安装，以及解决启动报错的问题。接着，通过创建文件和配置webpack.config.js，展示了如何使用webpack打包模块化JavaScript代码，最后解释了webpack的打包流程。

摘要由CSDN通过智能技术生成

一、安装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的工具

会从main.js出发，识别出源码中的模块化导入语句，递归找出入口文件所有依赖
后将入口和其他依赖打包到一个单独的文件中