![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
liuhua_2323
星空不问赶路人,时光不负有心人
展开
-
webpack之构建日志
当我们执行构建命令时候,会出现如下效果:事实上,很多时候我们并不关注这些,只关注是否构建成功和错误信息。下面我们就一起来解决这个需求,让我们的命令行清爽整洁不依赖插件通过在webpack.config.js中设置stats统计信息stats errors-only只在发生错误时输出 minimal只在发生错误或有新的编译时输出 ...原创 2019-12-17 23:20:03 · 1875 阅读 · 0 评论 -
webpack之打包压缩版和非压缩版
我们知道,在开发中一般使用非压缩版,利于调试。在生产环境中一般使用体积小的压缩版,有利于提升加载速度。下面我们就来看一下如何在webpack中对一份文件打包出压缩版和非压缩版1.安装插件:cnpm i terser-webpack-plugin -D2.新建src目录,并且新建index.js ,我们随便写点什么都可以console.log(111)3.配置:"...原创 2019-12-13 09:26:07 · 1782 阅读 · 0 评论 -
webpack之Scope Hoisting
我们先来简单分析一下:(没有开启Scope Hoisting)现象:构建后的代码存在大量的闭包代码[ (function (module, __webpack_exports__, __webpack_require__) { var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1); c...原创 2019-12-07 11:20:29 · 512 阅读 · 0 评论 -
webpack之Tree shaking(摇树优化)
概念:treeshaking就是只把用到的方法打入bundle,没有使用到的方法会在uglify阶段被擦除掉,这样得以优化项目体积。使用:webpack默认支持,在.babelrc里面设置moudules:false即可(如果你要把es6转成es5,同时又要开启treeshaking,需要在.babelrc里面设置modules:false,不然babel默认会把es6转成com...原创 2019-12-07 09:49:57 · 508 阅读 · 0 评论 -
webpack之多页面打包通用方案
多页面应用(MPA)概念:每一次页面跳转的时候,后台服务器都会返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用优势:页面之间的解耦 更利于SEO 多页面打包基本思路:每个页面对应一个entry,一个html-webpack-plugin缺点:每次新增或删除页面都需要修改webpack配置多页面应用通用打包方案动态获取entry和设置h...原创 2019-12-04 11:28:03 · 689 阅读 · 0 评论 -
webpack之移动端css px自动转换成rem
1.安装依赖:cnpm ipx2rem-loaderlib-flexible -D2.配置:{ test:/\.css/, use:[ MiniCssExtractPlugin.loader, 'css-loader', { loader:'px2rem-loader', ...原创 2019-12-03 18:20:51 · 879 阅读 · 0 评论 -
webpack之自动补全css前缀
css3的属性为什么需要前缀浏览器的兼容性问题(浏览器的标准尚未统一)谷歌:-webkit火狐:-mozIE:-ms欧朋:-o举个例子:display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers....原创 2019-12-03 17:26:28 · 882 阅读 · 0 评论 -
webpack之清除构建目录
安装:cnpm iCleanWebpackPlugin -Dclean-webpack-plugin插件是用于在下一次打包时清除之前打包的文件,避免构建前每次都需要手动删除dist使用clean-webpack-plugin(默认会删除output指定的输出目录)我在使用的过程中遇到了一个坑,先把报错信息给大家看一下:“TypeError: CleanWebpackPlu...原创 2019-12-02 16:04:27 · 698 阅读 · 0 评论 -
webpack之代码压缩
代码压缩的作用 / 好处JS和CSS经过压缩之后体积变小,也就是文件占用内存会变小 在访问网站的时候要加载JS和CSS,体积越小,加载越快。 网站打开的速度也就越快,有利于用户体验。 混淆:经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 Javascript 源代码。文件压缩1.js文件的压缩内置了uglifyjs-webpack-pluginwebpa...原创 2019-12-02 11:07:51 · 638 阅读 · 0 评论 -
webpack之文件指纹
什么是文件指纹文件指纹是文件打包后输出的文件名的后缀,通常用来做一些文件的版本管理如何生成 Hash:和整个项目的构建相关,只要项目文件有修改,整个项目构建的hash值就会更改 Chunkhash:和webpack打包的chunk有关,不同的entyr会生成不同的Chunkhash值(一个页面的值改变了并不会影响另一个页面,js文件一般采用此方法) Conte...原创 2019-11-30 11:23:10 · 1107 阅读 · 0 评论 -
webpack之文件监听
webpack中的文件监听文件监听是在源代码发生变化时,自动构建出新的输文件。webpack开启监听模式,有两种方式:1.启动webpack时,带上--watch参数,可以在package.json中配置 "watch":"webpack --watch"2.在webpack.config.js中设置watch:truemodule.exports={ wat...原创 2019-11-29 10:34:04 · 628 阅读 · 0 评论 -
webpack之解析图片,字体
我先简单介绍下这两个loader:file-loader用于处理文件url-loader也可以处理图片和字体,可以设置较小资源自动base64,减少http请求下面我以file-loader为例介绍webpack解析图片字体:1.安装:cnpm i file-loader -D2.在src下引入图片,并新建index.jsimport logo from './...原创 2019-11-29 10:07:09 · 294 阅读 · 0 评论 -
webpack之解析CSS ,Less
一、解析css1.安装:cnpm i style-loader css-loader -Dcss-loader用于加载.css文件,并转换成commonjs对象(因为webpack只支持js和json语法)style-loader用于将<style>标签插入到header中2.在src下新建index.css文件#div{ color: red; ...原创 2019-11-28 10:36:26 · 331 阅读 · 0 评论 -
webpack之解析ES6
1.首先安装 cnpm i @babel/core @babel/preset-env babel-loader -D2.然后在项目根目录下创建一个.babelrc文件3.在.babelrc下增加babel preset配置{ "presets":[ "@babel/preset-env" ]}4.在webpack.config.js中module添加规则...原创 2019-11-28 09:35:22 · 328 阅读 · 0 评论