vsc写vue生成基本代码快捷键_基于vue2.X的webpack基本配置,教你手动撸一个webpack4的配置...

0bb412434c3a16efa2aca46ce1007969.png

webpack说复杂也不复杂。不复杂,核心概念不外乎是entry, output, loader, plugins。webpack4还新增了optimization选项,用于代码分割和打包优化。现在webpack官网文档已经写的挺棒了。而当你真正开始手写一个webpack.config.js的时候,你就会发现,要记得东西有点儿多,还挺复杂的……

好啦,本文讲的是手动编写基于vue开发的webpack4配置,以下内容主要针对生产环境,开发环境的配置于之后奉上。


webpack的核心概念包含以下几个,要牢记:

  • entry - webpack打包的入口,并非代码执行的入口;
  • output - webpack打包后生成的静态资源文件,它是最终会被html引用的文件;
  • loader - 对于非js的模块(或说文件),转化成webpack能够处理的js文件;对于还要进一步处理的js文件进行加工处理;
  • plugins - 参与到整个webpack打包的过程(webpack打包的各个生命周期),可与loader结合使用,提供相应/辅助的功能。

Entry:

entry可以是单个入口,也可以是多入口。

单个入口的写法:

entry: 'a.js' 或 ['a.js', 'b.js']

多个入口的写法:

entry: { a: 'a.js', b: 'b.js'}

webpack会以你给的entry为入口,根据dependency graph,挨个打包,结合其他相应的设置,最终输出成页面要引用的静态资源文件。注意了,这里提到的“结合其他相应的设置”,很可能是不止一处的设置。

output

output里面的选项主要有(但远不止以下):

  • filename: '[name].[hash].bundle.js' // [name]和entry里面的name对应
  • path: path.resolve(__dirname, 'dist') // 指最终打包生成的目录
  • publicPath: 可以是'./dist/' 或 '/' 或 cdn地址 // 指外部访问静态资源文件的路径
  • chunkFilename: '[name].chunk.js' // 指用webpack.ensure或import().then()动态加载的文件

loader

loader就是把模块转换成webpack能够处理的js文件(如css,scss,vue等非js模块),或者对js模块本身进行再加工(如编译es6语法等)。

loader的写法好有好几种,loader一般放在module这个对象里的rules里面,现总结以下4种:

da7c9bf8aaab6aa0b63240ac702e958b.png

总结一下loader的常用四种写法:

use: [xxx, xxx]use: [{loader: XXX}, {loader: XXX}]use: [{ loader: XXX, options: {}}, 'XXX']loader: [XXX, XXX] 或 loader:XXX, options: {XXX}

常用的loader有:

  • 处理样式的:style-loader,css-loader,postcss-loader,sass-loader,less-loder
  • 处理es6的:babel-loader(要连同babel-core, babel-preset-env)一起用
  • 处理图片的:file-loader, url-loader, image-webpack-loader

Plugins

常用的plugin有:

  • 压缩js:uglifyjs-webpack-plugin
  • 合并&压缩css: mini-css-extract-plugin,optimize-css-assets-webpack-plugin
  • 清除目录:clean-webpack-plugin
  • 生成html:html-webpack-plugin
  • postcss相关的:postcss-plugin-px2rem,postcss-preset-env,postcss-sprites,autoprefixer
  • webpack自带的方法:webpack.ProvidePlugin等

是不是开始觉得要记得东西很多啊?蛤蛤蛤蛤蛤蛤,不要急,要记得东西远不止这些……


以上讲的都是些概念和基本配置,结合起来怎么用呢?

先上目录:

7733b0c5e91e09f40cb10d31ff29bf39.png

因为只写一个注册页,笔者没有用vue-cli,选择手动撸一个vue的webpack配置。

打包编译vue文件,需要用到vue-loader,样式需要用vue-style-loader,那么怎么办呢?一定记住安装vue-template-compiler,虽然它只存在于你的node_modules文件夹中,但是vue-loader需要用到它,所以务必记住安装。

另外,在loader中设置了vue-loader之外,还得设置一个变量const { VueLoaderPlugin } = require('vue-loader'),并且在plugins里面创建一个它的实例才行,即new VueLoaderPlugin()。

ps. 系不系感觉复杂了?我也布吉岛为神马这些配置要分散在不同地方进行配置,这就加剧了webpack上手的难度。。。。

7e574f91e7b2092a22f78e680e9b6b93.png

在我们书写配置的时候,一定要清楚自己想要webpack帮助你达到什么目的,以此来选择需要的loader和plugin以及其他辅助工具。

除了上面讲到的转化vue模块外,在生产环境下,我需要webpack帮助我的主要是打包、压缩js,css,images,自动生成html文件,以及每次打包前先删除已存在的dist目录。所以上图中所引入的模块就是能完成这些功能的基本工具。


f298ba53c3215c85f041436de37e60dd.png

这个是利用你的template文件生成最终的html文件,并对html文件进行打包压缩的,它会把html文件打包压缩成如下:

0da7ae8b25e385ed7766b8dd75f7453f.png
4a09f77220317ba4f59c85af51fd098d.png
c3d3619ca1209deb42a199bc44ceeacd.png

上面两张图分别在loader和plugins里面用到,它们结合在一起可以把css样式文件打包成一个css静态资源文件,通过link标签引入进html文档中。

cc13f74636d6243a68ffa84c03b3b983.png

在webpack4中,打包压缩JS和CSS都可以在optimization这个对象里进行。如果不写minimize,则mode为production时webpack会自动开启uglifyjs的操作。倘若写了minimize,里面却不配置uglifyjs,则这个自动的操作会被取消。

它们分别会让你的js和css文件打包压缩成如下:

2d17051b4bcb8b76ecc2cd2b2847e1f2.png
7db85fe3189256d5ad0b18050e869106.png

另外webpack最显著的特点,这也是webpack创始人打造它的初衷,就是code splitting!既然如此,我们当然要发挥webpack这个特点,帮助我们优化!注意哦,代码分割是内置在webpack里面的方法。在webpack4中,它在optimization里面配置,也就是取代了之前的commonsChunkPlugin这个插件。如下:

065736cf3052c7b628ef6a161688a673.png

另外,runtimeChunk用来单独打包压缩运行时的webpack代码。

7504aa98c3fc370788d4101208cd6861.png

至此,经过npm run build之后,代码执行的入口文件为以下四个:

ce87e4bddbeed4cc4b2c26b9acb4bf49.png

再让我们来分析一下打包后的文件大小,总之我打包后vendor变得很大,即便uglify了,也有188k。这可不行!这时候请记住plugin: compression-webpack-plugin

然后如下图在plugins里面创建一个它的实例:

b4f83e840aef019e9fbfa03d33c4d8de.png

这样一来,打包后你生成的文件就会包含一个vendor.bundle.js.gz二进制格式的压缩文件。如下图:

4c79d947a81ad3ee904ac6db38762da1.png

很开熏是不是?但是我们打包后dist/index.html中引用的是vendor.bundle.js,并不是这个.gz的压缩文件,怎么办?

这时候就需要后端配合修改一下nginx的配置,增加gzip_static on。仅仅有gzip on是不行滴。

然后你再打开页面就会发现vendor.bundle.js变成了63.4k。虽然还没有达到我的要求,但是已经缩水一半以上了!

32d8fbb30c98a481afd050c342fe122c.png

补充说一下webpack4“动态引入”的不同,如果要用import().then()这个动态引入方法,需要安装babel-plugin-dynamic-import-webpack这个插件才行。

总结一下webpack的复杂性,总体来讲就是要记得东西很多,有点“无厘头,没规律”,具体来说至少包含以下几个方面:

  1. 有些功能用loader就完事了,可有些还要配合着plugins去写。有些loader本身要配置plugins,有些loader需要到外面大plugins对象里进行设置。没有统一的规律遵循,比较杂乱;
  2. 不同loader和plugins配置项可以很多,不同版本也不一样(希望以后版本更迭的成本小一些,给开发者多一些温油);
  3. 像babel这样的,要注意不同版本的差别,否则会报错。babel-loader, babel-core, babel-preset, babel-polyfill一定要对应着来。并且用了babel-loader并不久完事了,要去设置对应的presets告诉babel要把你的es6编译成啥样的规范,可以写在options里,也可以在根目录设置.babelrc。另外要编译es方法和函数还要用到polyfill,如果是开发框架则要用另一个babel-plugin--transform-runtime --save-dev和babel-runtime --save。

总之要记的很多就是了。。。


链接文章:

https://segmentfault.com/a/1190000015725670

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

几款效率神器助你走上人生巅峰

一、背景 在我的工作和生活中,我一直都很注重效率工具的使用,这么些年下来也积累好几款很不错,但是又不为大多数人所熟知的软件工具,我用起来得心应手,很不错。那我就像在此给大家做个分享,希望你们都能多多…

自动部署 php,Jenkins实现PHP的自动部署

用HTML5 CANVAS做自定义路径的动态效果图片!最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...开源的EtherCAT Master简介EtherCAT的主…

macos下载的安装包在哪里_macbook任意降级,为您带来mac os完美降级教程

最近有许多用户反映升级了最新的系统出现了各种奇葩问题,更关键的是,很多常用(专业)软件不能使用了。因此有许多用户想要降级,现在macdown小编为您带来mac os完美降级教程,有需要的赶紧收藏啦!第…

Java Lambda表达

Java 8 lambda表达式示例 我个人对Java 8发布非常激动,尤其是lambda表达式和流API。越来越多的了解它们,我能写出更干净的代码。虽然一开始并不是这样。第一次看到用lambda表达式写出来的Java代码时,我对这种神秘的语法感到非常失望&#xff…

freebsd查询php5的版本,FreeBSD下查看各软件版本命令

查看FreeBSD版本: uname -aroot# uname -aFreeBSD power 8.1-RELEASE FreeBSD 8.1-RELEASE #0: Mon Jul 19 02:36:49 UTC 2010 rootmason.cse.buffalo.edu:/usr/obj/usr/src/sys/GENERIC amd64查看apache版本: apachectl -vroot#apachectl -vServ…

日期 日历 时区 地区 格式化 API 案例 MD

Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱MyAndroidBlogsbaiqiantaobaiqiantaobqt20094baiqiantaosina.com目录 目录常用案例判断是今天还是明天计算两个日期间相差几天增加或减少一定的时间判断缓存是否过期获取一个时间,要求当月有31天SimpleDateF…

kodi刮削器 中文_教你PLEX插件播放4K不能使用KODI解码导致卡顿的解决办法

文章作者Hao4K用户nothero自从买了这个索尼9500g,三天两头的出问题,而且还经常重启,经常卡顿。大法的画质确实不错,但是这系统稳定性实在是不敢恭维...最近装了一个KODI-PLEX插件,安利安利{:4_96:},画面实在…

php js分页插件怎么引用,js分页展示控件,传入简单参数就能使用的分页效果控件...

kkpager v1.3js分页展示控件,传入简单参数就能使用的分页效果控件准备工作,引入js、cssHTML DOM容器调用方法1、使用link模式getLink 参数需要按需要重写。2、使用click模式(自定义跳转函数)click 参数需要按需要重写,而getHref一般需要配置。必选参数pno 当前页码t…

python下载文件保存_从URL下载文件并将其保存在Python文件夹中

尝试使用stream选项:import os import requests def download(url: str, dest_folder: str): if not os.path.exists(dest_folder): os.makedirs(dest_folder) # create folder if it does not exist filename url.split(/)[-1].replace(" ", "_&qu…

Delphi TXLSReadWriteII导出Excel

TXLSReadWriteII导出Excle (有点复杂,可以自己简化一下,直接从项目中抓取的)procedure TformSubReport.DataToExcel(_Item: Integer; _Obj: TObject); //导出Exclevari, j, k: Integer;aVendorObj: TVendor;aEnterpriseObj: TEn…

python网络编程项目_Python网络编程攻略

第1章套接字、IPv4和简单的客户端/服务器编程 本章攻略: 打印设备名和IPv4地址 获取远程设备的IP地址 将IPv4地址转换成不同的格式 通过指定的端口和协议找到服务名 主机字节序和网络字节序之间相互转换 设定并获取默认的套接字超时时间 优雅地处理套接字错误 修改套…

玩下软工项目,第一轮--全局Context的获取,SQLite的建立与增删改查,读取用户通话记录信息...

项目的Github地址:https://github.com/ggrcwxh/LastTime 采用基于git的多人协作开发模式 软件采用mvc设计模式,前端这么艺术的事我不太懂,交给斌豪同学去头疼了。第一轮先实现查询通话记录返回对应号码上一次的通话时间。 真机测试下的效果图…

red hat linux 安装oracle10g vm,oracle 10g 在 RED HAT ENTERPRISE LINUX 5下的安装

oracle 10g 在 RED HAT ENTERPRISE LINUX 5下的安装ORACLE 10G在LINUX的安装:先上来两张图:DBA是努力的方向,ORACLE DBA包罗万象,连LINUX/UNIX都搞不定,还弄P个ORACLE啊.两部分:1.RED HAT ENTERPRISE LINUX 5的安装难点(对于现在的我来说):1.1YUM本地源的配置;网络有相关资料,不…

jvm垃圾回收机制_深入理解JVM的垃圾回收机制

​如何判断对象已“死”Java堆中存放着几乎所有的对象实例,垃圾回收器在堆进行垃圾回收前,首先要判断这些对象那些还存活,那些已经“死去”。判断对象是否已“死”有如下几种算法:1引用计数法引用计数法描述的算法为:给…

EF sqlite3报错 System.Data.Entity.Core.EntityException: 在提供程序连接上启动事务时出错。有关详细信息,请参阅内部异常。...

问题:sqlite3使用ef框架操作数据库报错 问题原因:数据库文件没有访问权限 结局方案:可以将数据库文件所在的文件夹的访问权限添加Everyone用户权限。 错误:"System.Data.Entity.Core.EntityException: 在提供程序连接上启动事…

oracle job定时报错,Oracle Job定时任务的使用详解

Oracle中的job能为你做的就是在你规定的时间格式里执行存储过程,定时执行一个任务 。下面是一个小案例,定时每15分钟向一张表插入一条数据一、步骤11.创建一张测试表-- Create tablecreate table A8(a1 VARCHAR2(500))tablespace DSP_DATApctfree 10init…

python调用ping命令_在Python中调用Ping命令,批量IP的方法

#!/usr/bin/env python #coding:UTF-8Author: jefferchen163.com 可在命令行直接带目的IP,也可将IP列表在文本文件中。 pingip.py -d DestIP DestIP示例: a)单个: 192.168.11.1 b)多个: 192.168.11.1;172.16.8.1;176.13.18.2 c)网段: 192.168…

thinkPHP伪静态,如何去掉index.php呢?

如何去掉index.php呢?1.httpd.conf配置文件中加载了mod_rewrite.so模块 //在APACHE里面去配置#LoadModule rewrite_module modules/mod_rewrite.so把前面的警号去掉2.AllowOverride None 讲None改为 All //在APACHE里面去配置 (注意其他地方的AllowOverride也统统设置为…

chown -r oracle:oinstall /oracle,CentOS7安装Oracle12c图文详解

root身份安装依赖包: yum -y install binutils compat-libcap1 compat-libstdc-33 compat-libstdc-33*.i686 elfutils-libelf-devel gcc gcc-c glibc*.i686 glibc glibc-devel glibc-devel*.i686 ksh libgcc*.i686 libgcc libstdc libstdc*.i686 libstdc-devel li…

在苹果笔记本如何使用python_mac下如何将python2.7改为python3

1.查看当前电脑python版本 python -V // 显示2.7.x 2.用brew升级python brew update python 3.如果安装成功,去系统目录下回看到两个版本的python cd usr/local/Cellar/ //到此目录下 cd python/ //进入python目录下 查看已安装的python版本,如果有2.x 和…