webpack
webpack专栏
空城1995
爱编程,爱java。
展开
-
webpack从入门到精通(四)优化打包配置总结②
1. tree shakingtree-shaking的本质是消除无用的js代码。无用代码消除广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为DCE(dead code elimination)。Tree-shaking 是 DCE 的一种新的实现,Javascript同传统的编程语言不同的是,javascript绝大多数情况需要通过网络进行加载,然后执行,加载的文件大小越小,整体执行时间更短,所以去除无用代码以减少文件体积,对javascrip原创 2020-11-27 10:47:59 · 377 阅读 · 0 评论 -
webpack从入门到精通(四)优化打包配置总结①
1.HMRHMR 即模块热替换(hot module replacement)的简称,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块), 极大的提升构建速度。1)配置修改基本代码结构为之前博客里使用的webpack开发环境devServer。使用webpack-dev-server,设置 hot 属性为 .原创 2020-11-26 10:24:59 · 424 阅读 · 2 评论 -
webpack之optimization.runtimeChunk作用
runtimeChunk,直观翻译是运行时的chunk文件,其作用是啥呢,通过调研了解了一波,在此记录下。何为运行时代码?形如import('abc').then(res=>{})这种异步加载的代码,在webpack中即为运行时代码。在VueCli工程中常见的异步加载路由即为runtime代码。{ path: '/about', name: 'About', // route level code-splitting // this generates转载 2020-11-25 10:55:27 · 10236 阅读 · 8 评论 -
webpack从入门到精通(三)生产环境的基本配置
1. 提取css成单独文件1)创建文件index.js中我们引入css文件import '../css/a.css';import '../css/b.css';2)下载plugin包npm install --save-dev mini-css-extract-plugin3)修改配置文件const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-pl.原创 2020-11-25 10:19:06 · 354 阅读 · 0 评论 -
webpack从入门到精通(二)开发环境的基本配置
1. 打包样式资源1)创建文件文件代码如下:index.less#title { color: #fff;}index.csshtml, body{ margin: 0; padding: 0; height: 100%; background-color: pink;}index.js// 引入样式资源import './index.css';import './index.less';2)下载安装loader包np...原创 2020-11-24 20:22:27 · 221 阅读 · 0 评论 -
webpack从入门到精通(一)初体验
1. webpack简介1.1 webpack是什么webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。1.2 webpack的五个核心概念Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。O.原创 2020-11-24 20:13:31 · 246 阅读 · 0 评论