前端学习笔记 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


相关文章
|
7月前
webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
65 0
|
1月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
56 0
|
6月前
|
Web App开发 移动开发 前端开发
初探前端世界:网页基本结构入门指南
初探前端世界:网页基本结构入门指南
106 0
|
2月前
|
JSON 前端开发 JavaScript
webpack如何支持多种类型的文件和转换需求
【10月更文挑战第13天】webpack如何支持多种类型的文件和转换需求
|
3月前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`<li>`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
103 8
|
4月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
66 13
|
5月前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
|
7月前
|
JavaScript 前端开发
TypeScript 学习笔记(六):TypeScript 与前端框架的结合应用
笔记,进一步提升 TypeScript 编程技能。
93 1
|
7月前
|
前端开发 JavaScript