![](https://img-blog.csdnimg.cn/20201009142217954.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端工具-Webpack
世间安得双全法,不负如来不负卿
ZhandsomeZ
走过的路脚记得,爱过的人心记得
展开
-
前端工具webpack-打包优化-第1篇
开门见山在本篇文章中主要是介绍webpack如何进行打包优化,在webpack中默认将所有的文件都打包到bundle.js文件中但是在项目运行的时候并不是所有的模块都需要使用的,如果一次性加载全部的文件,容易浪费带宽和流量所以呢在这里我们要把模块打包成不同js文件,实现更好的体验,主要是代码分割,有两种实现方式,一种是多入口打包,另外一种是动态导入具体如何实现,请看下面的演示多入口打包一般适用于多页应用打包,一个页面对应一个打包入口,具体看代码实现const { CleanWe.原创 2020-11-02 13:22:33 · 7069 阅读 · 0 评论 -
前端工具-webpack打包优化CSS篇
CSS打包优化实现css按需加载,主要是通过MinCssExtractPlug这个插件实现,安装插件 yarn add MinCssExtractPlug --dev webpack.config.js配置如下const { CleanWebpackPlugin } = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtract.原创 2020-11-01 23:08:07 · 7547 阅读 · 0 评论 -
前端工具-webpack生产模式优化介绍
拨云见日在webpack4中新增了,很多生产模式优化的功能 ,这些功能都是开箱即用的,大大提高了开发效率这些开箱即用的功能开发体验很友好,但是对于初学者容易造成混淆,在本篇文章将仔细介绍一下DefinePluginDefinePlugin这个插件集成在webpack内部直接通过webpack.DefinePlugin使用即可DefinePlugin 这个插件为代码注入全局成员,在production模式下这个插件默认启用,并且往代码中注入process.env.NODE_ENV一个常量.原创 2020-11-01 23:07:16 · 7014 阅读 · 0 评论 -
前端打包工具-webpack和rollup的区别
开门见山2017年4月初,Facebook 将一个 巨大的 pull 请求 合并到了 React 主分支(master) 中,将其现有的构建流程替换为基于 Rollup ,这一举动 促使 一些人发很疑惑 “你为什么选择 Rollup 而抛弃 webpack ”?这是一个完全合理的问题。Webpack 是现代 JavaScript 社区最成功的故事之一,每月有数百万的下载量,为成千上万的网站和应用提供支持。它有一个庞大的生态系统,许多贡献者,而且作为一个社区开源项目,还有一个 有意义的财务支持 .原创 2020-10-29 19:14:54 · 12328 阅读 · 3 评论 -
前端工具webpck-生产环境优化篇
webpck-环境配置篇原创 2020-10-27 20:16:58 · 6958 阅读 · 0 评论 -
前端工具-webpack热替换
开门见山Hot Module replacement 翻译成中文是模块热替换/热更新,模块热替换/热更新概念类似于电脑中的热拔插,主要指的是运行时的变化模块热替换/热更新指的是,应用运行过程中实时替换某个模块,而应用的运行状态不受影响,模块热替换只将修改的模块实时替换到应用中开启HMRHMR已经集成在HMR之中不需要安装模块,webpack-dev-server --hot 开启热替换/ 或者是在配置文件中开启 devServer: { hot: true .原创 2020-10-27 17:37:11 · 7046 阅读 · 0 评论 -
前端工具-webpack-sourceMap篇
前言### 从源码转换讲起JavaScript脚本正变得越来越复杂。大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。常见的源码转换,主要是以下三种情况: (1)压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。 (2)多个文件合并,减少HTTP请求数。 (3)其他语言编译成JavaScript。最常见的例子就是CoffeeScript。这三种情况,都使得实际运行的代码不同于开发代码,除错(debug)变得困难重重。.原创 2020-10-27 13:18:23 · 7777 阅读 · 0 评论 -
前端开发-开发配置篇
开门见山本篇文章主要是,介绍webpack如何实现自动打包构建,以及自动编译1、webpack-watch自动构建1、通过webpack的监视api,watch工作模式通过监听文件变化,自动重新打包具体用法也很简单 就是在运行的时候 加上 --watch,命令行:yarn webpack --watch 然后手动刷新浏览器即可这种方式比较麻烦,如果浏览器在编译过后能够自动刷新会更好,具体该怎么实现呢 通过browser-sync这个插件安装browser-sync:yarn add .原创 2020-10-27 11:21:30 · 7113 阅读 · 0 评论 -
前端工具 -webpack插件篇
拨云见日webpack 以插件的形式提供了灵活强大的自定义 api 功能。使用插件,我们可以为 webpack 添加功能。另外,webpack 提供生命周期钩子以便注册插件。在每个生命周期点,webpack 会运行所有注册的插件,并提供当前 webpack 编译状态信息。作为 webpack 的使用者和开发者,如果想要玩转 webpack,自定义一些自己的 webpack 插件是非常有必要的,而想要更好的写出更加完善的 webpack 插件,需要更加深刻的了解 webpack 的插件机制.原创 2020-10-26 18:51:28 · 6965 阅读 · 0 评论 -
前端工具webpack-基础使用第2篇
开门见山今天继续给大家带来一些webpack相关的内容文件资源加载器//在项目中使用img、font、由于webpack无法识别这些文件,这时候我们要使用文件资源加载器file-loader//安装依赖 yarn add file-loader --dev import createHeading from './heading.js';import "./main.css"import icon from './wolf.jpg';const heading = createH.原创 2020-10-24 11:37:46 · 6937 阅读 · 0 评论 -
前端工具webpack-基础使用第1篇
开门见山### 一. 概述什么是webpack模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。### 为什么使用webpack现在是网络时代,在我们的生活中网络成为了必不可少的,我们在网络上可以看到很多漂亮功能丰富的页面,这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的,那么这些都是怎么*组合在一起的呢,组合在一起需要花费多.原创 2020-10-24 10:46:10 · 6905 阅读 · 0 评论 -
webpack-基础配置篇
简介Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。webpack的特性1、打包 CommonJs 和 AMD 模块(以及绑定)2、可创建单个或多个按需加载的块,以减少初始加载时间3、在编译期间会解决依赖关系,减少了运行时的大小4、加载器可以在编译时预处理文件,如 coffee-script 到 javascript说明在使用webpack之前需要对下面的几条有一定的掌握1、安装nodej.原创 2020-08-12 12:13:51 · 6933 阅读 · 0 评论 -
前端工程化-ESLint+webpack
webpack原创 2020-08-14 18:52:40 · 13749 阅读 · 0 评论 -
webpack-api篇
简介本文主要是介绍webpack的api,具体的怎么配合使用不在本文中涉及webpack的API需要在项目的根目录下创建一个webpackconfig.js文件,这个文件是webpack的默认配置文件1、原创 2020-08-10 16:26:23 · 11856 阅读 · 0 评论 -
前端工程化-webpack原理
1、plugin通过钩子机制实现2、往钩子上挂载任务,一般是通过一个函数或者是一个包含apply方法的对象3、brower sync自动编译自动刷新原创 2020-08-16 13:03:18 · 14153 阅读 · 0 评论