webpack打包前端项目入门

前言：在开发过程中，利用webpack可以帮我们自动把ES6语法编译成低版本浏览器能解析的JavaScript代码。下面给出webpack打包前端项目入门案例。

[终端：进入项目所在目录]

1.初始化项目依赖：

npm init -y

2.安装webpack-cli脚手架

npm install webpack webpack-cli --save-dev

3.配置打包运行命令[package.json文件中]
"dev": "webpack --mode development --watch"

4.运行：npm run dev

-----------------------------------------------------------
e.g.最精简的项目结构目录
ProjectName
dist
node_moudles
src
index.js
package.json
package-lock.json
index.html

终端运行：npm run dev
操作：修改src中的源码，webpack会在保存文件时自动实时编译，部分IDE还能实时刷新页面
注意：

1.dist是存放编译后文件的目录，webpack打包时会自动创建该文件夹；
2.index.html是项目默认的访问页面，里面引入的是dist中即编译后的资源文件。
3.src是项目的源代码目录，webpack打包时里面不能为空，否则报错。

如在src中建一个index.js文件，文件内容可以为空，方便测试不妨在index.js文件中写入这行代码修改body的背景色：document.body.style.backgroundColor = "pink";

<!DOCTYPE html>
<html>
<head><title>测试webpack打包项目</title>
</head>
<body>
<h3>测试webpack打包项目</h3>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>

webpack打包前端项目入门相关推荐

基于qiankun搭建ng-alain15微前端项目入门实践
基础环境实践日期:2023-02-22 ng versionAngular CLI: 15.1.6 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
npm打包前端项目太慢问题分析以及暂时解决方案
npm build 打包前端项目实际上是执行 node build/build.js,但是随着项目的依赖包越来越多,项目打包时间不断延长,为了改善这个问题,需要从node入手暂时解决方案:扩大nod ...
[react] 使用webpack打包React项目，怎么减小生成的js大小？
[react] 使用webpack打包React项目,怎么减小生成的js大小? 打包优化的问题解决思路: 代码压缩:UglifyjsWebpackPlugin 代码分组 commonsChunkPlu ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...
webpack打包VUE项目读取外部配置文件，灵活配置域名
参考方案一作为一个兼职前端和运维的java程序员,今天我司测试人员提出了一个需求,当后台服务地址ip地址改变后,webpack打包的VUE项目得更改地址重新打包,太麻烦了,最好可以读取外部配置文件的 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
webpack 打包ts项目_使用webpack打包ts
初始化package.json npm init -y cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合) 2.1 ...
webpack打包测试_webpack入门笔记(一)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...

webpack打包前端项目入门

webpack打包前端项目入门相关推荐

最新文章

热门文章