没有合适的资源?快使用搜索试试~ 我知道了~
使用Webpack对JS文件进行打包构建并在配置文件中指定打包路径
8 下载量 40 浏览量
2021-01-08
10:00:30
上传
评论
收藏 430KB PDF 举报
温馨提示
试读
3页
一、介绍 Webpack 简称模块打包机 在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端的一个项目构建工具 基于Node.js开发 因此 若要使用webpack 必须先安装Node.js 借助Webpack这个前端自动化构建工具 可以完美实现资源的合并 打包 压缩 混淆等诸多功能 示意图: 官网:https://webpack.github.io 二、安装 在新版本中 需要分开安装webpack和webpack-cli 安装web
资源推荐
资源详情
资源评论
使用使用Webpack对对JS文件进行打包构建并在配置文件中指定打包路径文件进行打包构建并在配置文件中指定打包路径
一、介绍一、介绍
Webpack 简称模块打包机模块打包机
在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等
引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系
Webpack是前端的一个项目构建工具项目构建工具 基于Node.js开发
因此 若要使用webpack 必须先安装必须先安装Node.js
借助Webpack这个前端自动化构建工具 可以完美实现资源的合并 打包 压缩 混淆等诸多功能
示意图:
官网:https://webpack.github.io
二、安装二、安装
在新版本中 需要分开安装webpack和webpack-cli
安装安装webpack::
方式一:运行npm i webpack -g全局安装webpack 这样就能全局使用webpack的命令了
方式二:在项目根目录运行npm i webpack --save-dev以安装到项目依赖中
(注:可能是我的webpack是最新版本的关系 我只有方式二可用 我用了方式一安装后还是提示未安装webpack 有了解的大佬可在评论留言解惑)
安装安装webpack-cli::
在项目根目录下输入npm install webpack-cli -g 进行全局安装
三、打包三、打包
用Webpack打包 可以实现兼容性的转换兼容性的转换
不推荐直接在页面文件里引用任何包和任何css文件 这会拖慢项目的加载速度
可在一个单独的单独的JS文件文件里定义 这样 只需加载该JS文件即可
示例目录示例目录:
src 存放源代码
css
images
js
index.html 首页
main.js 项目的JS入口文件
dist 项目发布目录
1、首先、首先 初始化初始化npm
资源评论
weixin_38516270
- 粉丝: 3
- 资源: 1011
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功