前端学习笔记 webpack及命令文件结构

简介: 前端学习笔记 webpack及命令文件结构

Webpack安装命令


npm install --save-dev webpack


Vue.js安装


npm install vue vue-cli -g


-g 表示这个包安装后可以被全局使用


创建一个基于webpack模板的新项目


npm init webpack my_project


在本地以默认端口运行


npm run dev


Webpack下的 Vue.js 项目文件结构


818921171a6649bea52f4c726a358c1d.png


build 📂


431b1a0e8c4949b5a2f4bf4933d0de68.png


config 📂


e2cc05626209428298c0070a8cae007e.png


node_modules 📂

node项目所用到的第三方包特别多,也很大,所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下


bbdf7bee8b6c492881154763905375be.png


src 📂


c2b4608699cf496db85a27e5f2c28dcd.png


相关文章
|
1月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
1月前
|
前端开发
构建工具对比:Webpack与Rollup的前端工程化实践
在现代前端开发中,前端工程化变得愈发重要。本文将对两个常用的构建工具——Webpack和Rollup进行比较,探讨它们在前端工程化实践中的特点、优势和适用场景。无论是大型应用的打包优化还是轻量级库的构建,选择适合的构建工具都能提高开发效率和项目性能。
16 1
|
22天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
2天前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
20天前
|
前端开发 JavaScript 安全
|
26天前
|
域名解析 JavaScript 前端开发
TypeScript笔记(3)—— 使用WebPack工具
TypeScript笔记(3)—— 使用WebPack工具
13 0
|
29天前
|
前端开发 JavaScript 开发者
前端工程化实践:Webpack、Rollup等构建工具比较
在现代 Web 开发中,前端工程化已经成为了不可或缺的一部分。而构建工具作为前端工程化的重要组成部分,可以帮助开发者更高效地完成项目构建和管理。本文将比较两种主流的构建工具 Webpack 和 Rollup,并探讨它们的优缺点以及适用场景。
|
1月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(二)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
1月前
|
前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(一)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
1月前
|
前端开发 JavaScript Java
springboot 出现 Cannot resolve MVC View ‘index‘ 问题解决办法,前后端不分离项目前端文件存放位置,已经如何访问
springboot 出现 Cannot resolve MVC View ‘index‘ 问题解决办法,前后端不分离项目前端文件存放位置,已经如何访问
23 0

热门文章

最新文章

相关产品

  • 云迁移中心