祥哥的说

看版本号是否存在：npm info webpack项目目录中通常用webpack.config.js来设置打包配置，使用其他的名字webpac不能识别，除非运用下面的代码，明确指出。npx webpack --config webpackconfig.js ：告诉webpack以webpackconfig.js为配置文件进行打包。webpack打包运行方法：全局安装webpack...

【代码】webpack——module、chunk和bundle的区别。

webpack4和webpack5的区别，webpack5的新特性

webpack和vite的区别

Improve build performance with Persistent Caching （通过使用持久性缓存来提高构建性能）Cache基本配置在 Webpack 4 中，cache 只是单个属性的配置，所对应的赋值为 true 或 false，用来代表是否启用缓存，或者赋值为对象来表示在构建中使用的缓存对象。而在 Webpack 5 中，cache 配置除了原本的 true 和 false 外，还增加了许多子配置项，例如：cache.type：缓存类型。值为 'memory'或‘.

先看官方文档说明runtimeChunk：运行时生成的chunk，而非静态编译，一般来讲是用来管理各个chunk之间的运行关系。场景：业务代码中修改的代码重新打包生成了main的chunk，一些依赖包没有改变，但是verdors的包hash也变了，可能是因为没有配置runtimeChunk(runtime的内容都被打包嵌入了各自的打包文件）存在运行时一些依赖关系发生了变化。...

一、Mixin：缺陷组件与 Mixin 之间存在隐式依赖（Mixin 经常依赖组件的特定方法，但在定义组件时并不知道这种依赖关系）多个 Mixin 之间可能产生冲突（比如定义了相同的state字段）Mixin 倾向于增加更多状态，这降低了应用的可预测性（The more state in your application, the harder it is to reason about it.），导致复杂度剧增隐式依赖导致依赖关系不透明，维护成本和理解成本迅速攀升：难以快速理解组件行为，需要

babel知识点回顾babel的基本配置和使用快速回顾一、环境搭建及基本配置二、babel-polyfill的核心及按需引入什么是polyfillcore-js和regeneratorbabel-polyfill即两者的集合babel-polyfill如何按需引入三、babel-runtime 避免污染全局变量babel-polyfill的问题babel-runtime如何配置babel的基本配置和使用快速回顾环境搭建及基本配置babel-polyfill的核心及按需引入babel-runtime

Scope Hosting也是webpack性能优化的一种方式，不过侧重的是对产出代码的优化。使用Scope hosting的优点：示例说明：（1）在A文件导出一个字符串，在B文件中引入之后，通过console.log打印出来。（2）通过webpack打包构建之后，会发现将这两个文件构建成了两个函数，一个函数内是我们输出的字符串，一个函数内是console.log语句。问题：两个函数也就是两个作用域；不仅代码增加了，可读性还不太友好。（3）使用scope hosting进行配置处理之后，会讲

10-3 webpack基本配置串讲10-4 webpack如何配置多入口10-5 webpack如何抽离压缩css文件https://sunzhaoxiang.blog.youkuaiyun.com/article/details/113828983mini-css-extract-plugin10-6 webpack如何抽离公共代码和第三方代码10-7 webpack如何实现异步加载JS10-8 module chunk bundle 的区别10-9 webpa..

happyPack和ParallelUglifyPlugin的配置使用一、happyPack： 开启多进程打包二、ParallelUglifyPlugin：多进程压缩js三、何时开启多进程打包或者压缩happyPack和ParallelUglifyPlugin也是提高webpack打包速度的两种方式。happyPack： 开启多进程打包ParallelUglifyPlugin：多进程压缩js一、happyPack： 开启多进程打包配置使用：二、ParallelUglifyPlugin：

IngorePlugin和noParse都可以用于优化Webpack的性能，提高打包速度。一、IngorePlugin的使用IgnorePlugin避免引入无用模块，以时间处理库moment的使用为例进行学习和理解。使用时完全没必要引入所有语言的js代码，那么这个时候就应该忽略掉除了中文以外的模块代码。使用中文语言，相应的控制台输出结果如下：打包产物大小：IgnorePlugin的使用配置：在插件中使用webpack.IgnorePlugin匹配到moment下的locale语言包，

提升Webpack打包速度的方法1、跟上技术的迭代（node，npm，yarn版本稳定最新)2、在尽可能少的模块上应用loader例子： module: { rules: [{ test: /\.js$/, include: path.resolve(__dirname, '../src'), //只有在src目录下的文件，才进行babel转译。 // exclude: /node_modules/, //除了node_modules中的文件，才应用babel-loader

整体思路：就是通过将引入的模块，打到一个dll文件下，生成模块包和整体包产物文件的对应关系，再次打包时，如果能在映射关系中找到该模块，便直接使用产物中的包，不在进行模块分割打包，以此来提高Webpack的打包速度。DllPlugin配置使用：(1) 之前引入模块包时，会依据下面的代码分割配置，将模块包打到了vendors文件中在每次打包时，都会分析各个模块包的代码，然后进行处理，实际上这些包的代码我们也只是引入，并不能改变，如果只在第一次打包时，进行一次分析处理，后续再打包直接使用之前分析好的

背景：（1）开发中为什么引入模块时，不写具体的文件后缀，也能正确加载到文件呢？（2）甚至直接引入的是一个文件夹的路径时，也能正确使用文件下的index.js文件呢？import Child from './child';import Child from './child.js';resolve配置：(1) 在引入模块时，如果没有写后缀，那么webpack会在该目录下去查找有没有.js或者.jsx文件，再进行引用。(2) mainFiles中可以配置入口文件，默认是读取一个文件夹下

一、WebpackDevServer实现请求转发背景：请求跨域处理：借助devServer.proxy进行转发配置配置如下： devServer: { contentBase: './dist', //起一个位于当前目录下的服务器。 open: true, //打开默认浏览器 hot: true, //开启webpack中hot module replacement的功能 hotOnly: true //当webpack的HMR没有生效时，也不

一、讲讲PWA二、通过webpack配置实现PWAwebpack.prod.js:const WorkboxPlugin = require('workbox-webpack-plugin'); plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[name].chunk.css' }), // 使用workbox来进行配置 new WorkboxPlugin.

1、自定义开发npm包：（1）包名是library-sun（2）包版本为：1.0.02、包上传到npm平台的方法3、webpack对library包的基础配置：const path = require('path');module.exports = { mode: 'production', entry: './src/index.js', externals: 'lodash', // library包中有引入lodash，打包时不将lodash打进去，用户在引入该library时

1、直接引用样式文件，没有使用任何相关插件时，会出现css in js的情况，即打包到了一块。打包后的dist文件并没有css相关文件。2、css代码进行分割和压缩mini-css-extract-plugin：分割optimize-css-assets-webpack-plugin： 压缩// css抽取插件const MiniCssExtractPlugin = require("mini-css-extract-plugin");// css压缩插件const OptimizeC

类似的问题在开发中有实际遇到过：（1）在文件A.js中，引入了一个头图logo（logo.png)，开发完上传到服务器，正常展示（2）有需求要替换新的logo图片，处理：直接更换图片之后上传到了服务器，用的还是以前的图片名(logo.png)（3）更新图片上线后，反馈logo没有变，显然由于logo名字没变，那么当浏览器访问这个图片地址时，实际上并没有取服务器中的最新logo，而是用了浏览器缓存中的老logo。（4）改变图片的名称（logonew.png），那么在访问时就会请求最新的logo。.

shimming又称垫片，本身不是一种具体的使用方法，而是一种使用思路。有点像pollyfill，通过一些小小的“打补丁”方式增加一些特殊能力，改变或者实现webpack现有的一些功能或者还没有的能力，这些行为都是shimming。shimming的两种使用场景：webpack.ProvidePlugin 关联自定义变量与引入模块之间的对应关系import-loader 改变this的指向1、webpack.ProvidePlugin：关联自定义变量与引入模块之间的对应关系在index.

通过环境变量，对webpack的配置做一些拆分和merge。打包配置文件目录：分别是通用配置项，开发环境配置项，生产环境配置项打包时，脚本选择的weback配置文件：webpack.common.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');co

filename: 是入口文件打包时，对应输出文件名配置chunkFilename： 是入口文件引入的模块包，打包时对应的文件名配置。index.js文件中引入了lodash.js，打包结果如上。

一、打包分析webpack官方提供的打包分析方式webpack --profile --json > stats.json将打包过程的描述以json的形式放到stats.json文件中。1、具体使用：2、登录http://webpack.github.com/analyse其他的打包分析工具：https://webpack.js.org/guides/code-splitting/#bundle-analysis常用的是： webpack-bundle-analyzer安装

webpack中splitChunks的配置项如下：optimization: { splitChunks: { chunks: 'all', minSize: 30000, maxSize: 50000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true,

一、webpack和代码分割之间的关系代码分割实际上与webpack没有必然的捆绑关系，代码分割实际上就是一种优化代码加载的思路。1、手动实现代码的分割可以通过将第三方库的引入和业务代码手动做文件拆分，在entry中配置多个入口，将第三方库和业务代码打出不同的文件，进行代码的分割。二、使用webpack来处理代码分割webpack中实现代码分割，两种方式：同步代码： 只需要在webpack.common.js中做optimization的配置即可异步代码(import): 异步代码，无

Development和Production模式的区分打包按照开发模式进行webpack配置开发模式和线上模式在打包时所使用的配置是有所差别的，可以通过设置不同的打包文件对二者执行区分化打包，同时也可以将二者共有的配置项提取到公共的配置文件中。将webpack.config.js文件分成webpack.dev.js和webpack.prod.js对应的在package.json中将运行指令也进行划分： "scripts": { "dev": "webpack-dev-server -

Tree Shaking只支持ES模块的使用，不支持require这种动态引入模块的方式。前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tre...

index.js中使用react的框架和语法，直接进行打包webpack是不能识别这种语法的，在页面中是没有内容的。import React, {Component} from 'react';import ReactDom from 'react-dom';class App extends Component { render() { return (...

index.js文件中es6的写法，在打包生成的main.js文件中仍旧是es6的语法为了能够做到多浏览器兼容，需要使用babel进行编译转换 ，https://babeljs.io官网（1）安装babel-loader和@babel/core核心库npm install --save-dev babel-loader @babel/corebabel-loader:只是和w...

HMR的热模块替换：1、样式改变的热模块替换。2、js代码的热模块替换。（1）每次点击新增按钮后，都会生成一个新的item，下标为奇数项的背景颜色为黄色，当改变代码中背景颜色为绿色之后，页面会自动刷新，刷新之后已经存在的item会消失，重新点击新增按钮才出现，背景颜色为绿色。div:nth-of-type(odd) { background: yellow;}（2）希望...

1、package.json中设置命令行的运行脚本node server.js。 "scripts": { "bundle": "webpack", "watch": "webpack --watch", "start": "webpack-dev-server", "server": "node server.js" },2、使用express快...

windows 使用npm安装webpack 4.0以及配置问题的解决办法1、安装NodeJS首先需要安装nodejs点击如下链接https://nodejs.org/en/download/点击打开链接选择Windows Installer点击下载，下载完成之后点击安装包进行安装，点击运行点击next点上√，然后点击Next选择安装目录点击change选择安装目录将Fold name 改为d:\...

一、创建基本目录结构1.新建项目工程：PockerUI2.配置jsx3.安装 webpack在此之前你应该已经安装了 node.js.npm install webpack -g1参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上npm ins...

Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的语法和引入了新的原理，因此会让使用者感到疑惑。这些也是导致Webpack不被人熟悉的原因。因为刚开始使...

 写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进...

先来上一个例子：var htmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')module.exports = { entry: './src/script/main.js', output: { filename: 'js/bundle.js', ...

extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法:npm install extract-text-webpack-plugin --save-dev首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在webpack.config.js...

一.webpack基础　　1.在项目中生成package.json：在项目根目录中输入npm init，根据提示输入相应信息。（也可以不生成package.json文件，但是package.json是很有用的，所有建议生成）　　2.安装webpaack　　　　a.在全局中安装webpack：npm install webpack -g　　　　b.将webpack安装到项目并将webpack写入pa...

path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目...