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出发，识别出源码中的模块化导入语句，递归找出入口文件所有依赖
- 后将入口和其他依赖打包到一个单独的文件中
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了基于Vue.js 2.0实现百度搜索框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了vue+vue-meta-info动态设置meta标签教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3使用transition组件改变DOM属性的方式小结
这篇文章主要为大家详细介绍了Vue3中使用transition组件改变DOM属性的常用方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要为大家介绍了手写一个vite插件教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue3.0 搭建项目总结(详细步骤),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue中的slot封装组件弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了在vue-cli3中使用axios获取本地json操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue Router history模式的配置方法及其原理,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue + electron应用文件读写操作,如果要制作的应用并不复杂，完全可以将数据存储在本地文件当中，然后应用就可以通过这些文件进行数据的读写，需要的朋友参考下吧2022-06-06
在平时开发的时候很多情况都会使用到表格和分页功能,下面这篇文章主要给大家介绍了关于如何基于Element-Ui封装公共表格组件的详细图文步骤,需要的朋友可以参考下2022-09-09
最新评论