vscode使用webpack打包
vscode使用webpack打包
- 下载webpack
- 初始化项目
- 打包 .js文件
- 打包.js+.css
- webpack全局安装与局部安装
webpack作用就是将多个不同的.js文件或者.css文件打包为一个文件,减少请求量
有大佬的帖子写的很详细,各种资源的打包方式都有:
https://blog.csdn.net/chen4565/article/details/118093586
下载webpack
首先在项目路径的终端下载webpack两个插件,并全局部署
npm install -g webpack webpack-cli
还可以-v查看以下版本号
初始化项目
这里测试打包用的初始化项目为两个简单的方法,最后被main.js引用
common.js:
//直接在方法前面加上export关键字,相当于直接公开方法了
exports.info= function getList(str){document.write(str) //在浏览器进行输出
}
utils.js
exports.add=function (a,b){return a+b;
}
main.js
const common= require('./common')
const utils= require('./utiles')
common.info('hello'+utils.add(1,5))
在初始化项目后的根目录下添加webpack.config.js配置文件:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法// 入口文件entry:"./src/main.js",// 打包后的出口文件output:{// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的path:path.resolve(__dirname,'build'),// 输出的文件名称filename:'build.js',},// 使用开发模式打包mode:"development"
}
npm安装时-S -D作用及区别:-S 即--save(保存)包名会被注册在package.json的dependencies里面,在生产环境下这个包的依赖依然存在-D 即--dev(生产)包名会被注册在package.json的devDependencies里面,仅在开发环境下存在的包用-D,如babel,sass-loader这些解析器打包是在npm上运行命令, 一般来说你在配置完成 webpack.config.js 后,你打包时执行的命令是webpack ,但你也可以执行 npm run build 来进行打包,如何实现: 在package.json中的scripts下多加一行 "build": "webpack" ,就可以使用 npm run build他们的区别:在终端直接执行webpack命令,使用的是全局安装的webpack,当在package.js中定义了scripts时, 其包含了webpack命令,那么使用的是局部的webpack 运行命令开发环境: webpack ./src/index.js -o ./build/build.js --mode=development生产环境: webpack ./src/index.js -o ./build/build.js --mode=production添加能使css一起打包的插件: npm i css-loader style-loader -D添加能使scss一起打包的插件: npm install sass-loader node-sass webpack -D 因为你刚刚下载过 css-loader style-loader所以不用再次下载了添加能使html一起打包的插件: npm i html-webpack-plugin -D添加能使图片打包的插件: npm i url-loader file-loader -D添加能使html中图片打包的插件: npm i html-loader -D添加能使浏览器自动更新(刷新)的插件: npm i webpack-dev-server -D
打包 .js文件
最后在在项目根目录中使用命令 webpack 直接打包即可,最后的文件树如下:
然后可以测试一下打包结果
根目录中创建一个01.html文件,然后引入打包后的.js文件:
<script src="./build/build.js"></script>
最后打开看一下就好,out:hello6
打包.js+.css
webpack本身只能处理js模块,如果要处理其他类型的文件,就需要使用loader进行转化
Loader可以理解为模块和资源的转换器
首先需要安装loader插件,css-loader是将css装载到JavaScript,style-loader是将JavaScript识别css文件
npm i css-loader style-loader -D
然后创建一个.css文件,并引入到原本的main.js文件中
可以使用require(‘文件路径’)直接引入
接下来在原本的webpack.config.js配置文件中添加一部分内容,这里我直接写添加之后的配置文件整体了:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法// 入口文件entry:"./src/main.js",// 打包后的出口文件output:{// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的path:path.resolve(__dirname,'build'),// 输出的文件名称filename:'build.js',},//包含css文件的打包module:{rules:[{test:/\.css$/,//打包规则应用到以.css结尾的文件上use:['style-locader','css-loader']}]},// 使用开发模式打包mode:"development"
}
最后还是webpack一下:
webpack全局安装与局部安装
可以配置项目的npm运行命令,修改package.json文件,在scripts调试标签中添加"XXX": “webpack”,如下:
"scripts": {"...""dev": "webpack"},
然后打包的时候直接输入npm run dev就自动执行了webpack
在终端直接执行webpack命令,使用的是全局安装的webpack,
当在package.js中定义了scripts时, 其包含了webpack命令,那么使用的是局部的webpack
为什么全局安装还要本地安装?
仅仅全局安装够吗?
1.在js实例代码中,默认下node.js会在NODE_PATH和目前js所在项目下的node_modules文件夹下去寻找模块,因此,如果只是全局安装,不能直接通过require()的方式去引用模块,需要手动解决包路径的配置问题,当然你也可以复制全局安装的node_modules文件夹到项目下,还有办法可以选择将环境变量的NODE_PATH设置为C:\Program Files\nodejs。
2.对于包的更新不好管理,可能你需要为每个包重新命名,如gulp@3.8.1、gulp@3.9.1…,为了区别不同项目使用指定的包,保证模块之间的相互依赖(这块下面会介绍),区别每个项目正常运行。
因此,不推荐只全局安装。
本地安装的重要性
最早的node.js/npm实际上是全局的,包括现在还兼容NODE_PATH,但是不能支持全局多版本,于是nodejs团队改成本地安装的方法可能就是为了保证不同版本包之间的相互依赖,什么意思呢,举个例子wpdemo组件中相互依赖的包就有很多个
其中依赖包的指定版本号如下,不可轻易去修改,因为不同版本包对应依赖包的版本的功能有所差别,如果修改指定的版本来运行wpdemo,就可能会编译出错等bug。
依赖
再举个例子:
包版本为:A(0.0.1)依赖B(0.0.2),B(0.0.1)依赖C(0.0.3)
一段时间原作者更新后,
包版本为:A(1.0.1)依赖B(1.0.0),B(1.0.0)依赖C(1.0.0)
每一次的更新可能带来不一样的功能,在多人合作、发布模块到npmjs社区、上传到github给其他人使用时,保留模块的版本信息可用于下载指定的版本号显得特别重要。
本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动、复制、打包等,保证不同版本包之间的相互依赖,这些优点是全局安装难以做到的。
另外,据node团队介绍,本地安装包对于项目的加载会更快。
有优点也少不了缺点,如每次新项目都要本地安装所依赖的包,安装包时间相对较长,一来是包太大导致下载慢;二是浪费了硬盘空间,不过现在电脑硬盘动不动就几个T,你还会在意节省这点空间吗?
vscode使用webpack打包相关推荐
- 使用webpack打包后,vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法 卸载vetur,重装vetur
- webpack打包后自动弹出浏览器查看效果
当配置了webpack自动打包和预览页面后,每次打包都要复制 http://localhost:8080/ 到浏览器中查看效果,那么我们能不能在打包后自动打开浏览器查看效果呢,答案是可以的. 在pac ...
- LiveQing视频流媒体开放平台利用 webpack 打包压缩后端代码
需求背景 JavaScript 是脚本语言, 没有编译过程, 直接以源码就可以运行. 有的时候, 出于安全或者其他的原因, 我们不希望别人直接读到源码, 或者很容易对源码做出修改使用. 这个时候, 就 ...
- Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体(Font)文件,devsever,生产环境配置以及css的兼容写法
目录 一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件 二.打包 ...
- Webpack5:用webpack打包js文件
前提:node.js和npm已安装好 node.js和npm的安装网上教程一大堆,就不说了,建议初学者将node.js和npm装在c盘,能避免很多操作和麻烦(特指windows用户,有点想买mac了, ...
- webpack打包HTML配置自动,十三、HtmlWebpackPlugin的使用 ------- 2019-04-25
一.作用:htmlWebpackPlugin插件会在webpack打包结束后,自动帮我们生成一个HTML文件,并把打包生成的js自动引入到这个HTML文件中: 二.安装 :npm install ht ...
- webpack打包缓存_【第835期】Webpack 的静态资源持久缓存
原标题:[第835期]Webpack 的静态资源持久缓存 前言 你现在还在休假吗?早读课节前以web pack漫谈结尾,今年就以web pack开始吧.今日早读文章由众成翻译@yanni4night带 ...
- webpack打包优化_前端性能优化:webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...
- 自定义配置webpack打包文件
基础使用 安装 npm install webpack -g 模块化程序(配置过程忽略此步骤) cale.js function add(a,b){return a + b; } module.exp ...
最新文章
- (转)JS window对象的top、parent、opener含义
- 《ASP.NET Web 站点高级编程》勘误 Part 3
- windows7 安装IIS没有default web site 解决方法
- jQuery.sap.factory
- python扫雷游戏课程设计小组任务计划与分配表_Python开源扫雷游戏由网瘾少年制作,转手后月入18K,附赠所有源文件...
- linux Rh界面,Ubuntu Linux与RH系列的不同之处
- MySQL入门:如何创建数据库?
- VMware中Linux网络配置
- kubectl自动补全
- linux无字幕打开文件,解决SMPLAYER无画面/无字幕
- 达梦中的连接查询方式
- python界面显示图片更换背景_用python制作一个简陋的证件照换底色的桌面控制台应用...
- oracle+dbcc+checkdb,dbcc checkdb 修复数据库
- 2021年“亿级”体量产品的五大发展趋势
- Pandas - Review
- 【软考】信息安全多媒体标准化知识产权复习指南
- 干货|红外热成像摄像头拆解分析
- ghost系统后变成一个盘了找到文件的方案
- 直接将ppt转换成word格式的方法
- 怎样防止hosts被软件自动修改