webpack基础详解

Posted 2022-12-11 地中海真帅

知识点介绍:

这篇是将webpack的剩余常用知识点进行总结,首先是plugin第二个常用插件,输入打包命令时,进行自动压缩,然后还有为打包的文件进行版权声明,还有一个大点热更新,还有学习webpack自己的一些总结

plugin

介绍:

插件,通常是用于对某个现有的架构进行扩展webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩

plugin的使用过程:

1. 步骤一:通过npm安装需要使用的plugins(某些内置的插件不需要安装)
2. 步骤二: 在webpack.config.js中的plugins中配置插件

因为上一篇文章中讲述了第一个常用插件,所以我们就直接来讲述第二个插件吧

plugin 第二个常用插件:

作用

对js进行压缩,压缩成一行代码 ,但webpack5生产环境下会自动把js文件打包成一行

1. 它是一个独立的模块,先要安装

 npm install uglifyjs-webpack-plugin --save-dev

2. 对webpack.config.js文件进行配置

const UglifyjsWebpackPlugin= require('uglifyjs-webpack-plugin')

plugins:[
	
	new UglifyjsWebpackPlugin()
	]

这样的话你每次进行打包的时候,就会自动进行压缩

添加版权的plugin插件

插件的作用

为打包的文件添加版权声明，该插件名字叫BannerPlugin,属于webpack自带的插件

按照下面的方式配置webpack.config.js文件

const webpack = require('webpack')

module.exports=
	
	plugins:[
	new webpack.BannerPlugins('此版权归webpack所有')
	]

重新打包的话,就会发现打包的文件上面会有你输入的版权信息

热更新(搭建本地服务器,进行热更新)

什么是热更新(个人理解):

之前我们每次修改代码的时候,都必须要进行手动打包,这样非常浪费时间,所以webpack出来了一个热更新,指的是你每次保存代码的时候,系统自动给你进行打包压缩,这样的话就会提高我们的开发效率

指令: npm install --save-dev webpack-dev-server

好处

1. webpack-dev-server本地服务器搭建,将东西暂时存放到内存上,可以加快运行速度
2. 本地服务器是基于node.js搭建的,内部使用express,可以实现浏览器自动刷新显示我们修改后的结果

devserver也是作为webpack中的一个选项,选项本身可以设置几个属性(在webpack.config.js进行配置)

1. contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
2. port:端口号
3. inline :页面实时更新
4. historyApiFallback:在SPA页面中,依赖html5的history模式

注意
webpack 5将指令改变了(之前的指令没有了,官方用新命令将旧版本的指令给替换掉了,又是一个容易出错的点,无奈)

新版本指令:webpack serve --open

在package.json配置"start": “webpack serve --open”,
配置这个文件的话可以将东西命令简化,简化为npm start ,本来命令应该是webpack serve --open

在main.js(入口文件)中输入document.write()里面输入的东西并不会显示在页面中(这是一个bug,使用5.38.1版本的都有这个问题,页面会有一个警告

总结:

将webpack分为了三个文章进行讲解,webpack首先给我的印象的版本兼容性做的很差,很多插件都必须安装指定的版本(和你webpack版本想兼容的版本)才不会报错,一不小心安装错了就会导致报错,并且官方文档上并没有明确的说明webpack每个版本兼容的插件,这个让人体验感很不好.

说了不好的也说说好处吧

1. webpack可以根据模板生成HTML，并自动处理上面的css/js引用路径。
2. webpack可以自动处理里面的图片路径，css里面背景图的路径，字体引用
3. webpack可以开启本地服务器，一边改写代码，一边自动更新页面内容
4. webpack可以编译jsx es6 sass less coffescript等，并添加md5、sourcemap等辅助
5. webpack可以异步加载内容，不需要时不加载到DOM

webpack分为四个核心

1. Entry: 告诉webpack入口文件在哪
2. Output: 告诉webpack把编译好的文件放在哪里
3. Loaders: 告诉webpack在添加到依赖图之前如何转换,比如es6转es5,sass转css
4. Plugins: 在编译的过程中添加你想要的任何操作,loader做不了的事情

webpack也是工作中较为常用的一种工具,所以各位小伙伴在工作之前记得学习一下webpack呦,最后,作者创作不易,如果文章对你有帮助,记得留下你的点赞和关注呦