七月

一 压缩图片和css压缩图片image-webpack-loader 来压缩图片文件// image-webpack-loader 使用 imagemin 来进行压缩use: [ 'file-loader', // 需要在file-loader之后添加 image-webpack-loader { loader: 'image-webpack-loader', options: { // 压缩 jpg

webpack是基于node.js开发的，而node.js开发的模块化规范是commonJS.webpack npm node之间关系？webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包； webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目 npm是于Node社区中产生的，是nodejs的官..

1.概述Node应用由模块组成，采用CommonJS模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。// example.jsvar x = 5;var addX = function (value) { return value + x;}上面代码中，变量x和函数addX，是当前文件example.js私有的，其他文件不可见。如果想在多个文件分享变量，必须定义为global对象的属性。global.wrni.

为什么要使用webpack?如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法:模块化，让我们可以把复杂的程序细化为小的文件;类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；scss，less等CSS预处理器.........这

webpack5 :这个版本的重点在于以下几点。尝试用持久性缓存来提高内置性能。 尝试用更好的算法和最小值来改进长期缓存。 尝试用更好的Tree Shaking和代码生成来改善包大小。 尝试改善与网络平台的兼容性。 尝试在不约会任何破坏性变化的情况下，清理那些在实现v4功能时处于奇怪状态的内部结构。 尝试通过现在约会突破性的变化来为未来的功能做准备，使其能够重新连续地保持在v5版本上。一、webpack 5 的介绍及下载webpack 5 通过持久缓存提高构建性能。webpack 5

const path = require('path');// 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题// 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口// 注意版本问题（ TypeError: Cannot read property 'tap' of undefined at HtmlWebpackPlugin）co

阅读《深入浅出的webpack》-配置整体配置结构：constpath=require('path')module.exports={//entry表示入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入//类型可以是string、object、arrayentry:'./app/enty',//只有1个入口，入口只有一个文件entry:['./app/entry1','./app/entry2'],//只有1个入口，入口有...

阅读《深入浅出的webpack》：入门一、安装webpack 【要确保系统需安装5.0.0及以上版本的node.js】 1、安装webpack到本地项目： 安装Webpack到本项目时，可根据自己的需求选择以下任意命令运行： # npm i -D 是npm install --save-dev的简写，是指安装并保存到package.json的devDependencies # 安装最新的稳定版...

一、什么是CDN？ 通过压缩代码的手段可减小网络传输的大小，但实际上最影响用户体验的还是网页首次打开时的加载等 待，其根本原因是网络传输过程耗时较大。 1、CDN（内容分发网络）的作用： 加速网络传输，通过将资源部署到世界各地，使用户在访问时按照就近原则从离其最近的服务 器获取资源来加快资源的获取速度。 原理： ...

阅读《深入浅出的webpack》——压缩代码一、为什么要压缩代码？浏览器通过服务器访问网页时获取的JavaScript、CSS资源都是文本形式的，文件越大，网页加载的时间越长。为了提升网页加载速度和减少网络传输流量，可以对这些资源进行压缩。除了可以通过GZIP算法对文件进行压缩，还可以对文本本身进行压缩。对文本本身进行压缩，除了可以提升网页加载速度，还有可以混淆源码的作用。由于压缩后的代码可读性非常差，所以就算别人下载了网页的代码，也很难进行代码的分析和改造。二、如何在webpack中压缩代

简介：Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。webpack已经是大部分前端项目打包工具的首选，grunt、glup、browserify、fis等逐渐沦为辅助甚至完全被替代。安装：注册cnpm：npm install -g c...