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文件
二、打包JSON文件
第一种打包方法
第二种打包方法:webpack打包
第三种打包方法:创建webpack.config.js
第四种打包方法:使用自定义脚本(script)启动 ****(重要)
三、打包css文件使用webpack的loader
什么是loader
loader使用
四、对less文件进行打包
1、新建less文件
2、引入less
3、安装less-loader
4、在webpack.config.js中使用less-loader
5、执行npm run build
五、打包背景图片
附:图片转换成base64格式的优缺点
六、打包Font字体样式以及HTML
七、devsever
八、webpack生产环境配置
*九、css兼容性写法
十、html里的img标签里的图片如何打包
一、webpack打包JS文件
注意:一定要先下载Node.js,webpack 必须在 NodeJS 下运行
如未下载则可从Vue——安装@vue/cli(Vue脚手架)的三种方式 进行查看并下载
首先呢先随便选个盘创建一个文件夹为webpack(名字可以自己定义),在文件夹中添加两个新文件夹scr以及dist
按住win+r输入cmd调出控制台,输入正确路径
然后进行初始化:npm init
然后一直回车 ,直到重新出现目录
会发现多了个json文件
之后输入:
全局安装:
npm i webpack webpack-cli -g
本地安装:
npm i webpack webpack-cli -D
安装完成后会发现目录中多个文件夹
在src文件夹中创建两个新的js文件
1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js
mathUtils.js代码部分如下:
//1.新建mathUtils.js,用CommonJs规范导出
function add(num1,num2) {return num1+num2
}
function mul(num1,num2) {return num1*num2
}
module.exports = {add,mul
}
index.js代码部分如下:
//2.新建入口js文件index.js 导入mathUtil.js文件,并调用
const {add,mul} = require("./mathUtils.js")console.log(add(10,20))
console.log(mul(10,10))
完成后看下图:
2、然后使用webpack命令打包js文件
注意:webpack3使用下面的命令!!!
webpack ./src/index.js ./dist/bundle.js
webpack4及以上,使用cmd输入以下命令!!!
webpack ./src/index.js -o ./dist/bundle.js
这里报红,可以换一种写法
找到所在目录,并删除bundle.js文件夹
然后输入以下命令:
如果是开发版就用开发环境:
webpack ./src/index.js -o ./dist --mode=development
如果是用生产环境就使用这串代码:
webpack ./src/index.js -o ./dist --mode=production
!! 我们这里使用生产环境
报绿即可。这样就会发现刚刚删除的地方只有一个main.js文件
这时就可以新建一个页面进行测试了:
在dist文件夹中创建一个index.html页面,把main.js引入即可
运行页面:
即可看到已经成功
二、打包JSON文件
第一种打包方法
例如:在src文件夹中新建一个data.json文件,并对其输入一些json的语法
然后在src文件夹中的index.js里写入
import data from "./data.json"
并打印data :
console.log(data);
重新打包一下即可:
webpack ./src/index.js -o ./dist --mode=production
此处就已经完成webpack的打包。
第二种打包方法:webpack打包
直接简写成这样也可以打包
webpack可以帮我们打包js文件,只要指定入口文件(index.js)和输出的文件(bundle.js),不管是es6的模块化还是CommonJs的模块化,webpack都可以帮我们打包,还可以帮我们处理模块之间的依赖。
如果觉得--mode=development
麻烦可以配置webpack.config.js的时候如下写
第三种打包方法:创建webpack.config.js
在最外层新建一个webpack.config.js文件
写入:
代码如下:
const path = require('path');
module.exports = {entry: './src/index.js', //入口文件output: {path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve拼接路径filename: 'main.js', //打包后的文件名},mode:'development'
}
cmd输入:
webpack
打印效果如下:
第四种打包方法:使用自定义脚本(script)启动 ****(重要)
这里有两个生产环境
1、npm run dev//开发环境
2、npm run build//生产环境
这里使用生产环境也就是 npm run build
在package.json中的scripts中加上
"build": "webpack"
使用npm run build进行打包
npm run build
再次输入:
下面说一下如何打包css文件
三、打包css文件使用webpack的loader
什么是loader
loader是webpack中一个非常核心的概念。
webpack可以将js、图片、css处理打包,但是对于webpack本身是不能处理css、图片、ES6转ES5等。
此时就需要webpack的扩展,使用对应的loader就可以。
loader使用
步骤一:通过npm安装需要使用的loader
步骤二:通过webpack.config.js中的modules关键字下进行配置
大部分loader可以在webpack的官网找到对应的配置。
创建一个css文件:
引入链接:
在cmd中输入命令:
npm run build
安装使用style-loader 以及 css-loader
npm install --save-dev style-loader css-loader
并在配置中添加loader
代码如下:
module: {rules: [{test: /\.css$/,//正则表达式匹配css文件//css-loader只负责css文件加载,不负责解析,要解析需要使用style-loaderuse: [{loader: 'style-loader'}, {loader: 'css-loader'}]//使用loader}]}
这时重新加载命令即可:
webpack使用多个loader是从右往左解析的,所以需要将css-loader放在style-loader右边,先加载后解析。
此时样式成加载解析到DOM元素上。
完整效果:
四、对less文件进行打包
vscode不能直接对less进行解析,如需解析css则去下载插件easy less
1、新建less文件
2、引入less
3、安装less-loader
npm install --save-dev less-loader less
4、在webpack.config.js中使用less-loader
module: {rules: [{test: /\.less$/,//正则表达式匹配css文件//css-loader只负责css文件加载,不负责解析,要解析需要使用style-loaderuse: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader'//less文件loader}]//使用loader}]}
如果css和less都需要打包则写下述代码即可:
module: {rules: [{test: [/\.css$/i, /\.less$/], //正则表达式匹配css文件//css-loader只负责css文件加载,不负责解析,要解析需要使用style-loaderuse: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader' //less文件loader}] //使用loader//使用loader}]}
也可以写成:
module: {rules: [{test:[ /\.css$/i,/\.less$/],use: ['style-loader', 'css-loader','less-loader'],},],},
如下图:
5、执行npm run build
显示效果
五、打包背景图片
准备工作,准备两张图片,图片大小为一张8KB以下(名称为small.jpg),一张大于8KB(名称为big.jpg),新建一个img文件夹将两张图片放入。
1、这里在src中新建文件夹img,并把图片放在img文件夹中。并创建了一个css文件夹,将之前的css文件放入其中
2、将背景图片引入normal.css文件里:
3、其对应修改为
4、在webpack.config.js中添加以下代码:
{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource',generator: {filename: 'images/[hash][ext][query]'}//把打包的图片放到images文件夹},
或者
module.exports = {mode: 'development',entry: './src/index.js', //入口文件output: {path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve拼接路径filename: 'bundle.js', //打包后的文件名assetModuleFilename: 'images/[hash:8][ext][query]' //把打包的图片放到images文件夹// hash:8是把图片编译为八位数的哈希值},
}
这里使用了第一种方法:
再次输入命令
npm run build
这时就已经完成了打包,回到编辑器中查看,会发现多了个打包好的img里面是图片
再次打开index.html,
显示效果如下:
打包完成!
还有一种比较老的方法
安装使用url-loader处理图片
url-loader像 file loader 一样工作,但如果文件小于限制,可以返回 data URL 。(通常用于处理小图片)
npm install --save-dev url-loader
安装使用file-loader处理大图片
npm install --save-dev file-loader
然后对webpack.confid.js进行配置
{test: /\.(png|jpg|gif)$/i,//匹配png/jpg/gif格式图片use: [{loader: 'url-loader',options: {limit: 8192, //图片小于8KB时候将图片转成base64字符串,大于8KB需要使用file-loaderesModule: false, //解决es6语法不识别 name: 'img/[name].[hash].[ext]',}}],type: 'javascript/auto'}
index.html一定要和下面的 webpack.config.js导出路径一致!!!!
此时还需在src中新建一个index.html页面
然后运行:
npm run build
即可成功
如果图片设置的为8KB以上的图片在dist中添加JS文件夹以及img文件夹
显示效果:
如果为8KB及以下的图片则只会出现一个JS文件,因为把img图片压缩在了JS文件夹下的main.js中
可以看到dist中并没有img文件夹在浏览器中打开会发现图片的格式已经被更改
图片转换成base64格式的优缺点
1. 优点
(1)base64格式的图片是文本格式,占用内存小,转换后的大小比例大概为1/3,降低了资源服务器的消耗;
(2)网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。
(3)base64编码的字符串,更适合不同平台、不同语言的传输;
(4)算法是编码, 不是压缩, 编码后只会增加字节数,但是算法简单, 几乎不会影响效率,算法可逆, 解码很方便, 不用于私密信息通信;
(5)解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;
2. 缺点
(1)base64格式的文本内容较多,存储在数据库中增大了数据库服务器的压力;
(2)网页加载图片虽然不用访问服务器了,但因为base64格式的内容太多,所以加载网页的速度会降低,可能会影响用户的体验。
(3)base64无法缓存,要缓存只能缓存包含base64的文件,比如js或者css,这比直接缓存图片要差很多,而且一般HTML改动比较频繁,所以等同于得不到缓存效益。
下面再说一下打包字体和HTML
六、打包Font字体样式以及HTML
先从阿里巴巴字体图库中下载到本地
阿里巴巴矢量图标库
选择已下载好的图标进行下载到本地
下载完成后有个文件夹
打开过后把框起来的文件放入src中的css文件夹以及新建的fonts文件夹
更改iconfont.css中的路径:
引入文件路径:
在src中添加一个index.html文件(之前忘了说,这里给补上) 并写入字体样式以及类名
使用cmd输入以下命令 来安装插件
npm install --save-dev html-webpack-plugin
再webpack.config.js中添加以下代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],
打包资源:
{test: /\.(woff|woff2|eot|ttf|otf)$/i,type: 'asset/resource',generator: {filename: 'fonts/[hash][ext][query]'}},
打包完成后如下如所示:
删除dist文件夹中的所有文件或者直接删除dist即可
再次运行
npm run build
完成后会自动生成之前删掉的所有文件
效果如下:
七、devsever
npm install webpack-dev-server --save-dev
devServer: {// 项目构建后路径// contentBase: resolve(__dirname, 'build'),// 启动gzip压缩compress: true,// 端口号port: 3000,// 自动打开浏览器open: true,},mode: 'development'
}
运行
npx webpack-dev-server
第一次进行yes以及y
运行结束后会自动为你打开浏览器并进行实时渲染
接下来就可以测试一下更改css样式时浏览器会不会发生变化
这里发现打包完这么多后并没有单独打包css文件夹(如下图),所以接下来将进行生产环境配置
八、webpack生产环境配置
安装
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin= require('mini-css-extract-plugin')//提取css成单独文件
在plugins中添加
new MiniCssExtractPlugin()
并使用MiniCssExtractPlugin.loader替换use里的'style-loader',
MiniCssExtractPlugin.loader
运行npm run build
下图中会发现这里有个了css文件,但是并没有css文件夹
这时需在new MiniCssExtractPlugin()中添加以下代码
{filename:'css/build.css' // 创建的文件夹以及css文件的名称})
并且把刚刚的main.css给删除
再次进行打包:
可以看到已经成功创建
打开index.html也会正常显示
*九、css兼容性写法
这里主要是针对浏览器兼容样式的打包,例如(display:-webkit-flex样式),现在一般都支持ie9以上版本,基本用不到这一写法,但还是演示一下
首先先设置一下兼容样式
安装
npm install --save-dev postcss-loader postcss
记住:一定不要不能出现注释 ,出现注释就会报错
代码如下:
"browserslist":{"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"],"production": [">0.02%","not dead","not op_mini all"]}
之后在webpack.config.js中添加以下代码
代码如下:
安装:npm install postcss-preset-env
{loader: 'postcss-loader',options: {postcssOptions: {plugins: [['postcss-preset-env', //这个需要安装npm install postcss-preset-env否则不能生效{// 其他选项},],],},},},
进行打包
npm run build
打包后会发现两个错误原因是less文件中没有把注释给去掉
所以这里要把less中的注释去掉即可
再次打包:
npm run build
效果如下:
这里补充一点,上面忘了说。
十、html里的img标签里的图片如何打包
在webpack.config.js中添加以下代码:
{test: /\.html$/i,loader: "html-loader",},
记得安装插件
npm install --save-dev html-loader
最后进行打包即可:
npm run build
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体(Font)文件,devsever,生产环境配置以及css的兼容写法相关推荐
- 【QT】QT生成.exe安装包详细全文(保姆级教程)--打包软件及问题大全
缺少.dll文件的朋友,请跳转到我的另一篇文章"QT编译后的.exe文件运行时缺少一些.dll文件的解决办法[超详细教程,新手必备]",把问题解决再往下看. 一.前言: 最近,一个 ...
- Vue脚手架的安装(保姆级教程)
Vue脚手架的安装(保姆级教程) 文章目录 Vue脚手架的安装(保姆级教程) 1.下载vscode 2.node下载 5.Vue脚手架的安装 6.创建Vue项目 7.项目的运行 1.下载vscode ...
- vue+element项目 手机号、邮箱校验 保姆级教程
vue+element项目 手机号.邮箱校验 保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验 标题先说注意点 prop黄色框框起来的一定要有 废话不多 ...
- 天才少年稚晖君 | 【保姆级教程】个人深度学习工作站配置指南
天才少年稚晖君 | [保姆级教程]个人深度学习工作站配置指南 来源:https://zhuanlan.zhihu.com/p/336429888 0. 前言 工作原因一直想配置一台自己的深度学习工作站 ...
- 前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程 前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...
- 快速上手Springboot项目(登录注册保姆级教程)
本文章对SpringBoot开发后端项目结构做了简单介绍,并示范了使用SpringBoot+MySQL实现登录的后端功能,与本博客的另一篇文章 Vue 实现登录注册功能(前后端分离完整案例) | Ma ...
- 保姆级教程——将springboot项目部署到阿里云服务器(小白包会)
保姆级教程--将springboot项目部署到阿里云服务器(小白包会) 前言: 昨天本想着看论文,结果发现找的论文和课题不一致.那干点什么好呢?那就把我的毕业设计(一个springboot项目)部署到 ...
- 100内奇数之和流程图_论文写作篇【03】——毕业论文排版保姆级教程之页眉/页脚设置...
论文写作篇[01]--毕业论文排版痛点保姆级教程,请查收!论文写作篇[02]--毕业论文排版保姆级教程之图片/公式处理很多人都觉得页眉页脚设置非常头疼,其实如果弄清楚其中的原理,设置好各种各样要求的页 ...
- 个人网站搭建保姆级教程(2)- 前端工程umi脚手架搭建
前言 最近搞了个服务器,想着自己做个网站的脚手架,因为自己是纯前端新手,而且半路出家,中途踩了好多坑,准备写5篇给各位大佬们分享一下,如何从0搭建个人网站 服务器购买与环境搭建 前端工程umi脚手架搭 ...
最新文章
- 17委托异步调用方法
- 学习XML(添加一个子节点) 摘录
- 珠心算测试(c++版)
- docker选择安装位置_监控摄像机的安装位置选择和焦距选择
- 使用KNN时出现非数值属性和缺失值
- 专题导读:大数据异构并行系统
- 大疆Onboard SDK开发中连接飞控后串口设置与开机自启动
- mvc 路由 .html 404,vs2017 mvc 自定义路由规则 出现 404.0 错误代码 0x80070002
- 局域网ip扫描工具_Network Kit X for Mac(网络检测工具箱)
- c语言单片机期末试题及答案,单片机原理与应用期末试题及答案
- 98版本QQ五笔词库转98版万能五笔词库
- go kegg_GO分析和KEGG分析都是啥?
- rk356x-Android 刷机
- 【我的OpenGL学习进阶之旅】学习OpenGL ES 3.0 的实战 Awsome Demo (上)
- 计算机文件夹添加密码,电脑如何给文件夹设置密码
- hihocoder1498 Diligent Robots
- Java二维数组的错误写法分析
- 令人敬畏的泰格伍兹 万维钢_令人敬畏的桌面壁纸:Windows 7版
- 安装mathpix注册不了账户:unexcepted error
- c语言图像压缩编码,基于C语言的图像压缩算法
热门文章
- java判断long相等_java判断long类型字符是否相等的方法
- python ctypes总结
- Python判断一个数是否为素数
- VS2003版本Json格式文件的解析
- Ubuntu20.04或18.04下PX4(pixhawk)源码编译环境配置教程,及构建代码各种错误解决办法
- sqlserver2019安装注意事项-最后一步机器学习无法验证通过,机器学习python
- Socket并发配置之一config的配置
- 如何使用Django和Celery为Web构建进度栏
- 三菱FX3G和台达,施耐德两台变频器的通讯示例 通过modbus rtu功能,实现三菱FX3G PLC通讯控制变频器正反转
- 制作网上投票链接制作可以投票的链接制作制作一个投票链接