webpack的安装全过程
更新时间：2025年06月12日 10:02:02 作者：不想起名55
这篇文章主要介绍了webpack的安装全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、安装webpack
新建目录，执行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出发，识别出源码中的模块化导入语句，递归找出入口文件所有依赖
- 后将入口和其他依赖打包到一个单独的文件中
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vue3中watch无法监听的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
Vue中对比scoped css和css module的区别
这篇文章主要介绍了Vue中scoped css和css module的区别对比，scoped css可以直接在能跑起来的vue项目中使用而css module需要增加css-loader配置才能生效。具体内容详情大家参考下本文2018-05-05
这篇文章主要给大家介绍了关于Vue精美简洁登录页完整代码的相关资料,通过文中的方法大家可以使用实现简单的用户登录界面,下面通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Nuxt的路由配置和参数传递方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue项目如何引入json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现宫格轮转抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下2021-09-09![elementui[el-table]toggleRowSelection默认多选事件无法选中问题](//img.jbzj.com/images/xgimg/bcimg7.png)
elementui[el-table]toggleRowSelection默认多选事件无法选中问题
这篇文章主要介绍了elementui[el-table]toggleRowSelection默认多选事件无法选中问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本文通过示例代码介绍了vue时间戳和时间的相互转换方式,通过场景分析介绍了vue3使用组合式api将时间戳格式转换成时间格式（2023年09月28日 10:00）,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
![elementui[el-table]toggleRowSelection默认多选事件无法选中问题](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论