webpack
文章平均质量分 54
啊祝arzhu
git:https://github.com/crazyzsm
npm:https://www.npmjs.com/~arzhu
展开
-
webpack系列之优化策略
1、打包速度优化1.1、速度监控插件—speedMeasureWebpackPluginspeed-measure-webpack-plugin是一款能检测Loader和Plugin耗时的插件,具体的用法就不再阐述了,可以去https://www.npmjs.com/package/speed-measure-webpack-plugin这看看1.2、减小webpack搜索文件范围1.2.1、Loader中的配置我们通常使用Loader去加载webpack不能识别的文件,例如.css .vue文件原创 2020-05-19 23:48:24 · 750 阅读 · 0 评论 -
浅谈Webpack工作机制
开始阶段1、从命令行输出命令之后,先去node_modules下的.bin找到webpack相关的执行文件.cmd(查看源码我们可以直到在webpack中的packags.json中定义了bin字段,用于指定脚本执行的文件)这一步将得到命令行输入的参数对象2、根据上一步得到的参数,构建全局唯一的compiler对象,实例化此对象3、为compiler对象加载插件配置(插件在此执行,xxx-plugin.apply(compiler),compiler实例化对象是参数),加载完成之后,启动编译com原创 2020-05-11 00:06:57 · 523 阅读 · 0 评论 -
webpack系列之loader
loader是什么?webpack默认只支持解析打包.js文件和.json文件,当我们在项目中使用其他资源时,会失败的,所以为了能够解析多种类型资源,webpack提出了为资源设置loader的概念loader的使用:webpack.config.js项目中module。exports={ ..... module:{ rules:[ //rules是一个数组,一个项目可以放置多个loader { test:'/\.css$/', //正则匹配 .css文件时使原创 2020-05-09 00:00:08 · 371 阅读 · 0 评论 -
webpack的babel设置
众所周知webpack打包能够处理一些高级的ES语法,比如我们使用了ES6中的import,那么我们只需要打包这个.js文件,然后运行就行了,但是这么做有一个缺点,不能够解析更高级的语法,只能解析ES6低级的语法,例如class static语法糖是不会被解析的。 我们可以在webpack中使用Babel来解决这个问题。1、babel是什么?babel是一个JavaScript的...原创 2019-07-18 14:56:55 · 338 阅读 · 0 评论 -
html-webpack-plugin插件实现在内存中生成index.html
我们使用webpack-dev-server能够实现自动打包编译,生成的bundle.js在内存中,不被用户看到,还要设置script的src标签为 /bundle.js 才能实现自动打包编译。那么我们能否不用自动配置script的src属性呢? 使用webpack的插件,html-webpack-plugin能够实现在内存中创建index.html,并且不用设置script标签,这个插...原创 2019-07-17 15:03:52 · 1710 阅读 · 0 评论 -
使用webpack实现css文件的加载
我们都知道webpack'是一个依赖管理工具,使用webpack构建的项目,依赖都被管理得好好的,我们已经知道.js的文件可以使用webpack打包,或者使用webpack-dev-server自动打包进行管理,那么.css样式文件该怎么管理呢?? 我们可以让.js文件引用.css文件,这样就能实现一次请求而获得所需要的资源了,我们可以创建一个main.js文件,使用import 'in...原创 2019-07-17 16:22:03 · 771 阅读 · 0 评论 -
webpack---解决url文件加载的问题
现在有这么一个需求,就是在css中要给一个div设置一个背景图片,我们使用了style-loader和css-loader加载器,成功加载了css,那么在css中设置的div{background:url('./背景.png')}能否也被css-loader加载出来呢?? 答案是不能,因为css-loader只能匹配.css的文件,所以我们就需要用到url-loader,1、url-lo...原创 2019-07-17 20:49:23 · 289 阅读 · 0 评论