初入Webpack(一)

简介: 什么是Webpack?

什么是Webpack?

1) 模块化
2) 自定义文件或npm install
3) 静态文件模块化
4) 借助于插件和加载器

主要优点

1) 代码分离
2) 装载器(css,sass,jsx等等)
3) 智能解析(requier("./templeate/"+name+".ejs"))

安装流程

npm install -g webpack 全局安装
npm install webpack -dev -server 安装一个webpack 服务器监听状态

下面开始学习

打开终端(不用管在什么路径下)

 npm install -g webpack 

image.png

我在E盘下新建WebpackCodeBase文件夹
我们需要让他的文件夹中生成一个package的json文件用来之后加载我们后续的模块

此时在你当前目录下初始化 npm init 

之后会出现下图中的样子
npm init

image.png

package name: (webpackcodebase) ——你对应的webpack 名字
version: (1.0.0)  ——版本号
description: 'webpack打包demo'——描述
entry point: (index.js)——路口文件
test command:——  测试命令
git repository:—— git  仓库
keywords: webpackdemo——关键词
author: liujinshi——作者
license: (ISC)——许可

以上步骤直接回车即可。
然后文件夹中就会生成package.json文件
package.json

此时用编辑器打开文件
同时在同级目录下新建 index.html, a.js, b.js 三个新文件,此时目录结构
![目录结构]image.png

持续更新中.....

相关文章
|
6月前
|
JavaScript 前端开发
webpack成长指北第1章---为何使用webpack
webpack成长指北第1章---为何使用webpack
43 0
|
6月前
webpack成长指北第4章---webpack配置文件
webpack成长指北第4章---webpack配置文件
40 0
|
JavaScript
webpack4主流程源码阅读,以及动手实现一个简单的webpack(二)
webpack4主流程源码阅读,以及动手实现一个简单的webpack
127 0
|
2月前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
4月前
|
缓存 前端开发 JavaScript
webpack【实用教程】
webpack【实用教程】
42 0
|
6月前
|
JavaScript 前端开发
webpack成长指北第2章---安装webpack的正确姿势
webpack成长指北第2章---安装webpack的正确姿势
55 0
|
6月前
|
存储 前端开发 文件存储
webpack成长指北第5章---webpack的基础配置
webpack成长指北第5章---webpack的基础配置
45 0
|
6月前
|
JSON JavaScript 前端开发
用打王者荣耀的方式学习 webpack 没有不会的
用打王者荣耀的方式学习 webpack 没有不会的
|
Shell
webpack4主流程源码阅读,以及动手实现一个简单的webpack(一)
webpack4主流程源码阅读,以及动手实现一个简单的webpack
62 3
webpack4主流程源码阅读,以及动手实现一个简单的webpack(一)
|
前端开发 JavaScript 测试技术
Webpack | 青训营笔记
Webpack | 青训营笔记
52 0
下一篇
无影云桌面