h5教程分享webpack实例教程

 所属分类:web前端开发

 浏览:78次-  评论: 0次-  更新时间:2022-10-26
描述:更多教程资料进入php教程获得。 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规...
更多教程资料进入php教程获得。 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

安装 Webpack

在安装 Webpack 前,你本地环境需要支持 node.js。

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm

首先全局安装webpack,再npm初始化一个项目,并局部安装webpack开发工具

$ npm install webpack -g
登录后复制
npm init (项目名称)

$ npm install webpack-dev-server --save-dev
登录后复制

在项目目录下创建app文件夹,并创建index.js文件,写入如下代码

console.log('hello world');
登录后复制

在项目文件夹下打开命令行,输入如下命令

webpack app/index.js build/index.js
登录后复制

出现如下代码即为成功

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

看下build/index.js文件的代码:

可以看到73行就是我们app/index.js 文件的代码

具体源码等改天我们再分析,今天我们主要的目的是体验。

这样一个一个代码敲效率太低,我们可以通过webpack.config.js文件来完成更高级的功能。

以上就是分享webpack实例教程的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: webpack,web,教程,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!