webpack入门核心知识还看不过瘾?速来围观万字入门进阶知识

入门进阶知识

一文了解webpack入门进阶知识

  • 🤾‍♀️序言
  • 🏓一、Tree Shaking
    • 1. 引例阐述
    • 2. Tree Shaking配置
  • 🏸二、Development和Prodiction模式的区分打包
    • 1. 项目打包结构
    • 2. 共有配置webpack.common.js
    • 3. 开发环境webpack.dev.js
    • 4. 生产环境webpack.prod.js
    • 5. 运行项目package.json
  • ⚽三、Webpack和Code Splitting、SplitChunksPlugin
    • 1. 代码分割-Code Splitting
    • 2. 引例阐述-SplitChunksPlugin
    • 3. 实现方式-SplitChunksPlugin
    • 4. SplitChunksPlugin配置参数
  • 🏐四、打包分析,Preloading,Prefetching
    • 1. 打包分析
    • 2. Preloading、Prefetching
      • (1)引例阐述
      • (2)preloading和prefetching
  • 🏏五、CSS文件的代码分割
    • 1. css文件代码分割
    • 2. 压缩css文件
    • 3. 合并打包css文件
  • 🏑六、webpack与浏览器缓存
    • 1. 浏览器缓存配置
    • 2. 解决旧版本问题
  • ⚾七、Shimming的作用
    • 1. Shimming垫片
    • 2. this指向
  • 🎖️八、结束语
  • 🐣彩蛋 One More Thing
    • (:往期推荐
    • (:番外篇

🤾‍♀️序言

上一篇文章中我们讲到了 webpack 的一些基础特性,但是呢,单单会基础特性还是远远不够的。因此,在今天的文章中,将给大家带来 webpack 的高级特性,包括但不限于 dev 环境和 prod 环境的区分打包,以及使用 webpack 对项目进行代码分割等等技巧。

废话不多说,下面开始进入今天的学习吧~🎳

🏓一、Tree Shaking

1. 引例阐述

假设现在我们有一个需求,写一段程序来对两个数做加法和减法。现在,我们来实现这个功能。具体代码如下:

export const add = (a, b) => {console.log(a + b);
}export const minus = (a, b) => {console.log(a - b);
}

接下来,我们在入口文件引入它。具体代码如下:

import { add } from './math.js';add(1, 2);

在这种状态下,我们用 npx webpack 命令来对项目进行打包。查看打包后的文件代码:

/***/ "./src/math.js":
/*!*********************!*\!*** ./src/math.js ***!\*********************/
/*! exports provided: add, minus */
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minus", function() { return minus; });
const add = (a, b) => {console.log(a + b);
};
const minus = (a, b) => {console.log(a - b);
};/***/ })

我们可以发现,在入口文件我们只引入了加法的操作,因为我们当下只想用到加法功能,而暂时还不需要用减法。但是呢,打包后的文件,把减法部分的内容,也一起,给打包进去了。这无形之中,多多少少给我们添加了不少麻烦。

因此呢,我们就需要引入 webpack 中的 Tree Shaking ,来解决这个问题。

2. Tree Shaking配置

首先我们需要在 webpack.common.js 里面进行配置。如果是在 Development 的模式下,那么默认是不拥有 Tree Shaking 的。因此需要进行以下配置,具体代码如下:

//node的核心模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');module.exports = {mode:'development',optimization: {usedExports: true}
}

在开发环境下,我们需要加上 optimization 模块来对项目开启 Tree Shaking


接下来,我们继续对 package.json 进行配置。在这个文件下,我们需要添加以下代码:

{"sideEffects": false
}

sideEffects:false 指的是什么意思呢?当设置为 false 时,表明对所有的 ES Module 开启 Tree Shaking 操作。

值得注意的是, Tree Shakig 只支持 ES Module 这种类型的引入,并不支持 commonJS 等类型的引入。这是因为, ES Module 的底层实现是静态的,而 commonJS 的实现则是动态的。


还有另外一种情况就是,如果你想要使得某些模块不开启 Tree Shaking ,那么可以将 sideEffects 进行以下配置。具体代码如下:

{"sideEffects": ["*.css""@babel/poly-fill" ]
}

以上代码的意思为,对所有的 css 文件以及 @babel/poly-fill 不开启 Tree-shaking 功能。


接下来我们来看一下配置完成之后,在开发环境下的效果。具体代码如下:

/***/ "./src/math.js":
/*!*********************!*\!*** ./src/math.js ***!\*********************/
/*! exports provided: add, minus */
/*! exports used: add */
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return add; });
/* unused harmony export minus */
const add = (a, b) => {console.log(a + b);
};
const minus = (a, b) => {console.log(a - b);
};/***/ })/******/ });
//# sourceMappingURL=main.js.map

大家可以看到,如果是在开发模式下,减法功能依然是存在的,只是多个一句 /*! exports used: add */ 来表明只使用 add 这个功能。

这是为什么呢?因为在开发模式下, webpack 怕这个地方如果引入了其他模块,那么删除就很容易导致报错,所以它没有进行删除。


但如果 mode 是在生产环境下时, Tree Shaking 的作用就比较明显了。我们修改完 mode 后来看下打包后的结果。具体代码如下:

function (e, n, r) { "use strict"; r.r(n); var t, o; t = 1, o = 2, console.log(t + o) }

生产环境下打包后只有一行,小编摘取了最终要的部分出来。

大家可以看到,当处于生产环境下时,打包后的结果只显示了加法功能。而我们没有使用到减法,所以这个时候就不会连带着打包出来了。

顺带着这个话题,接下来我们就来讲一下, webpackdevelopmentProduction 模式下的区分打包。

🏸二、Development和Prodiction模式的区分打包

1. 项目打包结构

通常情况下,我们的项目会有三个 webpack 的配置文件。一个是 webpack.common.js ,一个是 webpack.dev.js ,另外一个是webpack.prod.js 。第一个文件用来放开发环境和生产环境下共同的配置,第二个文件用来放开发环境下的配置,第三个文件用来放生产环境下的配置。

接下来我们来了解下,这三个配置文件的代码。

2. 共有配置webpack.common.js

如果我们不编写 common 文件的话,那么 devprod 这两个文件的代码重合度就会比较高,所以我们把相同的部分抽离出来。具体代码如下:

//node核心模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {// 放置入口文件,明确怎么打包entry:{main: './src/index.js'},module:{rules:[{test: /\.m?js$/,//exclude,顾名思义即排除在外。如果js文件在node_modules文件夹下面,那么我们就排除在外// 因为node_module一般都是来自于第三方库,它已经自动的处理好此部分工作,所以我们没必要再去做重复操作exclude: /node_modules/,use: {loader: "babel-loader",}},{test:/\.(jpg|png|gif)$/,use:{loader:'file-loader',options: {//placeholder 占位符name: '[name]_[hash].[ext]',outputPath: 'images/',limit: 10240}}},{test:/\.scss$/,use:['style-loader', {loader: 'css-loader',options: {//表明前面要先走sass-loader和postcss-loaderimportLoaders: 2,modules: true}}, 'sass-loader','postcss-loader']},{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},{test: /\.(eot|ttf|svg)$/,use: {loader: 'file-loader',}}]},plugins: [new HtmlWebpackPlugin({//表明要引用哪一个模板template: 'src/index.html'}),new CleanWebpackPlugin(['dist'])],// 输出,表明webpack应该怎么输出output: {publicPath: '/',//用[]可以生成多个文件filename: '[name].js',// 指打包后的文件要放在哪个文件下path: path.resolve(__dirname, 'dist')}
}

3. 开发环境webpack.dev.js

抽离完 common 代码之后,现在我们来编写 webpack.dev.js 文件。具体代码如下:

const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');const devConfig = {mode:'production',devtool: 'cheap-module-eval-source-map',devServer: {contentBase: './dist',// 当运行完npm run start时,会自动的帮我们打开浏览器open: true,port: 8080,// 让我们的webpackDevServer开启hotModuleReplacement这样子的功能hot: true,// 即便HMR没有生效,也不让浏览器自动刷新hotOnly: true},plugins: [//热模块更新new webpack.HotModuleReplacementPlugin()],optimization: {usedExports: true}
}module.exports = merge(commonConfig, devConfig)

4. 生产环境webpack.prod.js

继续,我们来编写抽离后的 prod 代码。具体代码如下:

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');const prodConfig = {mode:'development',devtool: 'cheap-module-source-map'
}module.exports = merge(commonConfig, prodConfig)

到这里,大家对比上面三个文件的代码可以发现,这样的代码抽离使得我们的项目结构变得更为清晰了。

5. 运行项目package.json

上面配置完成之后,我们现在要来想一下,想要运行开发环境和生产环境不用的配置,是不是应该把运行命令也给区分开来。因此,我们package.json 文件做出以下配置:

{"scripts": {"dev": "webpack-dev-server --config webpack.dev.js","build": "webpack --config webpack.prod.js"}
}

通过以上配置,那么我们就可以通过命令 npm run devnpm run build 来运行项目,以此来区分项目是开发环境还是生产环境


同时,如果我们想要在控制台更直观的看到报错信息,那么在开发环境的情况下,我们可以不用 webpack-dev-server 来运行,可以直接用用 webpack 来运行。具体代码如下:

{"scripts": {"dev-server": "webpack --config webpac.dev.js","dev": "webpack-dev-server --config webpack.dev.js","build": "webpack --config webpack.prod.js"}
}

这样,我们就可以通过 npm run dev-build ,来使用 webpack 来运行项目。

⚽三、Webpack和Code Splitting、SplitChunksPlugin

1. 代码分割-Code Splitting

有时候,我们可能会遇到一个业务逻辑里面有上万行代码,那么这上万行代码打包后,全部就丢到 main.js 文件里面了,这样大的文件,会使得整个项目的加载速度会变得很是缓慢。因此,我们就需要用到代码分割Code Splitting来解决这件事情。

我们在 webpack.common.js 中进行配置。具体代码如下:

module.exports = {optimization: {splitChunks: {chunks: 'all'}}
}

通过以上代码我们可以得知,通过使用 optimization 中的 splitChunks ,达到了代码分割的效果。

那使用这个配置之后, webpack 想要做的事情是什么呢?

事实上,使用 splitChunks 之后,那么当 webpack 遇到公用的类库时,会帮我们自动地打包生成一个新的文件,之后再把其余的业务逻辑拆分到另外一个文件中去。

值得注意的是,公用类库不管是以同步的方式还是以异步的方式进行加载, webpack 都能够帮我们进行代码分割。

2. 引例阐述-SplitChunksPlugin

上面我们讲到了 webpack 的代码分割,那么实际上, webpack 的代码分割,其底层实现原理所使用的是 splitChunksPlugin 这个插件。接下来我们来讲一下这个插件。

在没有用 SplitChunksPlugin 这个插件之前,如果我们异步引入一个库,那么 webpack 给其打包后的文件名将会命名为 0.js1.js......

我们现在希望在做代码分割时, webpack 能给我们的第三方库进行自定义命名,这又该怎么处理呢?

3. 实现方式-SplitChunksPlugin

首先我们对引入的库前面,添加 webpackChunkName 配置。具体代码如下:

function getComponent() {return import(/*webpackChunkName:"lodash"*/'lodash').then(({ default: _ }) => {var element = document.createElement('div');element.innerHTML = _.join(['Monday', 'Tuesday'], '_');return element;})
}getComponent().then(element => {document.body.appendChild(element);
})

/*webpackChunkName:"lodash"*/ 这句话想要表明的意思为:当我们异步的引入 lodash 这个库并且想要做代码分割时,即当我们给 webpack 进行打包时,给其起名为 lodash


上面这个配置知识第一步,接下来我们要来安装并使用一个动态引入的插件。具体代码如下:

安装插件:

npm install --save-dev @babel/plugin-syntax-dynamic-import

.babelrc 下引入:

{// plugins: ["dynamic-import-webpack"] 非官方支持插件plugins: ["@babel/plugin-syntax-dynamic-import"]
}

配置 webpack.common.js

module.exports = {optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendors: false,default: false}}},
}

4. SplitChunksPlugin配置参数

接下来我们再来看关于 SplitChunksPlugin 的一些常用配置。具体代码如下:

module.exports = {optimization: {splitChunks: {/*使用async时,只对异步代码进行代码分割;使用all时,对同步和异步代码同时进行代码分割;使用initial时,表示对同步代码进行代码分割*/chunks: 'all',//大于30kb时,做代码分割minSize: 30000,//表明代码分割后文件最大的大小,如果超过了则会继续进行拆分;有一些文件如果拆分不了则此配置想基本就没啥用了maxSize: 0,minRemainingSize: 0,//至少有两个块被使用了才会被提取minChunks: 2,//表示同时加载的模块数,最多是5个/*比如我们引入了10个类库,那么我们会做10次代码分割。而这个时候我们将此参数填为5,那么webpack在打包时会将前10个库给我们生成5个js文件,之后的就不会再做代码分割了,全部丢到一个文件里面去*/maxAsyncRequests: 5,//入口文件做代码分割最多只能分割成3个js文件,超过3个就不会再做代码分割了maxInitialRequests: 3,//文件生成时的中间符号automaticNameDelimiter: '~',//让defaultVendors和default中的文件名有效name: true,enforceSizeThreshold: 50000,//当打包同步代码时,cacheGroupscacheGroups: {defaultVendors: {//检测你引入的库,查询是否是在node_module下的test: /[\\/]node_modules[\\/]/,priority: -10,//确定是在node_modules下后,将其进行打包,并命名为vendors.jsfilename: 'vendors.js'},//对非第三方库的代码做代码分割default: {priority: -20,reuseExistingChunk: true,filename: 'common.js'}},}}
}

🏐四、打包分析,Preloading,Prefetching

1. 打包分析

打包分析指的是,当我们使用 webpack 来进行代码打包之后,我们可以借助打包分析的一些工具,来对我们打包生成的文件进行一定的分析,之后来看其打包的是否合理。那么如何进行打包分析呢?

我们要用到一个 github 的第三方仓库,戳此链接进入~

了解完文档该库的内容后,接下来我们要对 package.json 进行配置。具体代码如下:

{"scripts": {"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js","dev": "webpack-dev-server --config ./build/webpack.dev.js","build": "webpack --config ./build/webpack.prod.js"}
}

通过上面的代码,我们可以分析:在 --config 前面加上配置 --profile --json > stats.json ,意思为 webpack 打包后会生成打包分析文件,这个文件叫做 stats.json ,同时, --json 表示的意思为 stats.json 文件的格式是一个 json 格式的。


在生成完 stats.json 文件以后,我们就可以把它放到打包工具里进行分析。大家可以定位到官方文档中的 bundle-analysis ,里面提供了 webpack-chartwebpack-visualizer 等可视化工具供我们使用,这个可以依据个人需求,选择对应的工具,对 stats.json 文件进行分析。

2. Preloading、Prefetching

(1)引例阐述

事实上,当我们配置 splitChunks 时,里面的 chunks 默认值是 async 。也就是说,如果我们不对它进行配置,那 webpack 默认只对异步代码进行代码分割。 webpack 为什么要这么做呢?

webpack认为把同步代码打包在一个文件就好了,同时呢,它希望我们要多写点异步加载代码,这样才能让我们的网站性能得到真正的提升。

现在,我们来说一个生活中一个非常常见的场景。假设现在我们在登录知乎网站,那么刚进去的时候我们是还没有登录的。我们现在希望的是点击登录这个按钮,登录对应的模态框就能显示出来,而不是点击完还要等到它加载,这无形这种就可以使得页面加载速度变快了许多。

那这该怎么处理呢?这就要谈到 webpack 中的 preloadingprefetching 了。

(2)preloading和prefetching

假设我们现在要引入一个 click.js 文件,那么我们可以这么处理。具体代码如下:

document.addEventListener('click', () => {// 这句话的意思为:当主要的js文件都加载完成之后,之后就是网络带宽有空闲的时候,它就会偷偷的把 ./click.js 文件给加载好import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {func();})
});

通过以上代码我们可以知道,在所引入的文件前面,即 ./click.js前面,加入 /* webpackPrefetch: true */ 即可达到我们想要的效果。这句话的意思为,当主要的 js 文件都加载完成之后,这时就是网络带宽有空闲的时候,那么 webpack 机会偷偷的在这个时间段,把 ./click.js 文件给加载好。

这里说到的是 prefetch ,但其实我们也可以把 webpackPrefetch 改成 webpackPreloadpreloadprefetch 的区别在于: preload 是跟主文件同时进行加载,而不是在主文件加载完才加载的。一般来说,我们都用 prefetch , 只有等主文件把活干完了,再来加载剩余的我们想要的文件,这样的逻辑和对页面的优化才是比较完美的。

综上,原先我们打包像 jQuerylodash 之类的库时,只需要在第一次访问的时候加载,而等到第二次访问的时候,我们就可以借助缓存,提高访问的速度。但这种方式也只是提高第二次访问的速度,而我们想要实现的是,当第一次访问的时候, webpack 就可以使得页面的加载速度是最快的。

所以最终我们使用了 preloadprefetch 这两种实现方式来解决这个问题。

🏏五、CSS文件的代码分割

1. css文件代码分割

上面我们讲到了 js 文件如何进行代码分割,现在,我们来讲 css 文件,如何进行代码分割。对于 css 文件的代码分割来说,我们要引用到官方文档中提到的一个插件: MiniCssExtractPlugin 。接下来我们来看一下这个插件如何使用。

第一步: 安装插件。具体命令如下:

npm install --save-dev mini-css-extract-plugin

第二步: 在开发环境和线上环境中使用。我们打开 webpack.common.js 文件,引入该插件并使用。具体代码如下:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {entry:{main: './src/index.js'},module:{rules:[{test:/\.scss$/,use:[MiniCssExtractPlugin.loader, {loader: 'css-loader',options: {//表明前面要先走sass-loader和postcss-loaderimportLoaders: 2,modules: true}}, 'sass-loader','postcss-loader']},{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}]},plugins: [new MiniCssExtractPlugin({// 如果文件被直接引用,走filenamefilename: '[name].css',// 如果文件被间接的引用,那么走chunkFilenamechunkFilename: '[name].chunk.js'})],optimization: {//使用treeShakingusedExports: true,splitChunks: {chunks: 'all',cacheGroups: {vendors: false,default: false}}}
}

第三步: 配置 package.json 文件。具体代码如下:

{"sideEffects": [//表示不对css文件开启treeShaking"*.css"]
}

2. 压缩css文件

对于打包后的css文件,其大小还是比较大的,所以我们需要对文件大小进行压缩。这该怎么处理呢?

**第一步:**安装插件。具体命令如下:

npm install optimize-css-assets-webpack-plugin -D

第二步: 在开发环境和线上环境中使用。我们打开 webpack.common.js 文件,引入该插件并使用。具体代码如下:

const CssMinimizerPlugin = require("optimize-css-assets-webpack-plugin");module.exports = {optimization: {minimizer: [new OptimizeCSSAssetsPlugin({})]}
}

3. 合并打包css文件

有时候,我们可能会有很多个入口文件,每个入口文件又都有其对应的若干个 css 文件。那么这个时候我们想把所有的 css 文件,都打包到同一个文件下,该怎么处理呢?

我们需要在 webpack.common.js 进行配置,具体代码如下:

module.exports = {optimization: {splitChunks: {cacheGroups: {styles: {name: "styles",test: /\.css$/,chunks: "all",enforce: true,},},},}
}

通过以上代码,我们可以了解到,我们需要在 splitChunks 中额外配置一个 stylescacheGroups ,将所有的 css 文件打包到一个 命名为 styles 的文件夹下。

🏑六、webpack与浏览器缓存

1. 浏览器缓存配置

当我们刚访问网站时,第一次加载总是需要从零开始加载各种文件的,而假设我们的代码没有更新时,我们希望再次加载时可以从浏览器中直接拉取缓存,而不是重新进行加载。而等到我们的代码发生更新时,再重新加载网页。那这该怎么处理呢?

第一步: 配置开发环境 webpack.dev.js 文件。具体代码如下:

const devConfig = {output: {filename: '[name].js',chunkFilename: '[name].chunk.js',}
}

第二步: 配置生产环境 webpack.prod.js 文件。具体代码如下:

const prodConfig = {output: {filename: '[name].[contenthash].js',chunkFilename: '[name].[contenthash].js',}
}

以上的代码旨在解决的问题是,当在线上环境时,对输出的文件加一个哈希值。这个时候,如果我们的代码有发生改变时,webpack就会生成一个新的哈希值,网页就会进行更新。如果我们的代码没有发生改变,那么这个哈希值还是一样的不会改变,网页就会从浏览器中拉取内存信息,进行加载。

2. 解决旧版本问题

以上内容呢,如果发生在一些比较低的 webpack 版本,是不能生效的。所以我们需要进行一个配置,来兼容低版本问题。我们在 webpack.common.js 下进行配置,具体代码如下:

module.exports = {optimazation: {runtimeChunk: {name: 'runtime'} }
}

⚾七、Shimming的作用

1. Shimming垫片

继续,现在我们来了解一下在 webpack 中, shimming ,即垫片的概念。

webpack 的打包过程中呢,我们往往要做一些代码上或者打包过程上的兼容。

比如,对于两个 js 文件来说,模块和模块之间是相互独立的,他们之间是没有耦合度的。假设我们现在有两个文件,具体代码如下:

jquery.ui.js:

export function ui(){$('body').css('background', 'red');
}

index.js:

import _ from 'lodash';
import $ from 'jquery';import { ui } from './jquery.ui';ui();const dom = $('<div>');
dom.html(_.join(['Mondady', 'Tuesday']), '~');
$('body').append(dom);

大家可以看到,现在我们想要在 index.ui.js 文件中引入 $ ,但是在这个文件中,它并没有引入 jquery 这个库。所以,如果就这样子直接运行,是肯定的会报错的。

因此,如果我们想要解决这个问题,该怎么进行配置呢?

下面我们将对 webpack.common.js 进行配置。具体代码如下:

const webpack = require('webpack');module.exports = {plugins: [new webpack.ProvidePlugin({$: 'jquery',//'_': 'lodash',//_join: ['lodash', 'join']})]
}

所以,这间接的可以理解为,拿点东西把 $ 垫上,也就有了我们标题说的 shimming ,垫片的概念。

2. this指向

对于项目中的文件来说,其 this 的指向都是指向模块本身,而不是指向全局。那我们如果想让项目中的所有 js 文件都指向全局,该怎么处理呢?

第一步: 安装 loader具体命令如下:

npm install imports-loader --save-dev

第二步: 配置 webpack.common.js具体代码如下:

module.exports = {module: {rules: [{test: /\.m?js$/,exclude: /node_modules/,use: [{loader: "babel-loader",},{loader: 'imports-loader?this=>window'}]}]}
}

通过配置 imports-loader 以后, webpack 表明,它将会把 js 文件中的 this 指向全部指向 window 全局中。

🎖️八、结束语

在今天的文章中,我们学习了使用 Tree Shaking 来优化代码的打包大小,同时,学习了 DevProd 环境下的区分打包,需要明确在这两个模式下各自相同的配置以及不同的配置,分清楚他们之间的关系。

除此之外呢,我们还学会了使用 webpack 来对 js 文件和 css 文件进行代码分割。以及使用 webpack 来对代码进行打包分析和提前加载 preloading

最后,我们还学会了关于 webpack 如何开启浏览器缓存,以及垫片 Shimming 的作用。

关于 webpack 的基础特性和高级特性讲到这里就结束啦!希望对大家有帮助~

如有疑问或文章有误欢迎评论区留言💬或加vx: MondayLaboratory 交流~😉

本文代码已上传至公众号,后台回复关键词 webpack 即可获取~

🐣彩蛋 One More Thing

(:往期推荐

  • webpack基础知识系列

  • vuejs基础知识系列

(:番外篇

  • 关注公众号星期一研究室,第一时间关注优质文章,更多精选专栏待你解锁~

  • 如果这篇文章对你有用,记得留个脚印jio再走哦~

  • 以上就是本文的全部内容!我们下期见!👋👋👋

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307920.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Power Automate生产现场实例分享回顾

Power Automate生产现场实例分享回顾8月28日&#xff08;周五&#xff09;19&#xff1a;30-21&#xff1a;00&#xff0c;Danfos智慧工厂数字化解决方案高级顾问Helena Wang通过Teams和B站为大家分享了Power Platform开发以及它在工业生产当中的应用。一、什么是低代码开发&am…

万字总结webpack实战案例配置

一文了解webpack中常见实战案例配置&#x1f6f4;序言&#x1f68c;一、Library的打包1. webpack打包库2. 库引用冲突&#x1f68d;二、PWA的打包配置1. PWA是什么2. webpack中的PWA&#x1f68e;三、TypeScript的打包配置1. 引例阐述2. webpack对ts的配置&#xff08;1&#x…

程序员过关斩将--应对高并发系统有没有通用的解决方案呢?

“灵魂拷问&#xff1a;应对高并发系统有没有一些通用的解决方案呢&#xff1f;这些方案解决了什么问题呢&#xff1f;这些方案有那些优势和劣势呢&#xff1f;对性能孜孜不倦的追求是互联网技术不断发展的根本驱动力&#xff0c;从最初的大型机到现在的微型机&#xff0c;在本…

org.apache.ibatis.executor.ExecutorException: A query was run and no Result Maps were found for the

一:报错 org.apache.ibatis.executor.ExecutorException: A query was run and no Result Maps were found for the Mapped Statement com.wyj.Dao.Bill.BillMapper.getBill. Its likely that neither a Result Type nor a Result Map was specified.二:解决 未在mapper.xml…

.NET5.0 单文件发布打包操作深度剖析

.NET5.0 单文件发布打包操作深度剖析前言随着 .NET5.0 Preview 8 的发布&#xff0c;许多新功能正在被社区成员一一探索&#xff1b;这其中就包含了“单文件发布”这个炫酷的功能&#xff0c;实际上&#xff0c;这也是社区一直以来的呼声&#xff0c;从 WinForm 的 msi 开始&am…

webpack实战之手写一个loader和plugin

webpack实战之编写一个简易的loader和plugin&#x1f514;序言&#x1f3b5;一、如何编写一个Loader1. 碎碎念2. 项目结构3. 业务代码编写&#xff08;1&#xff09;入口文件代码&#xff08;2&#xff09;编写loader&#xff08;3&#xff09;引用loader&#xff08;4&#xf…

手写一个简易bundler打包工具带你了解Webpack原理

用原生js手写一个简易的打包工具bundler&#x1f95d;序言&#x1f349;一、模块分析(入口文件代码分析)1. 项目结构2. 安装第三方依赖3. 业务代码4. 开始打包&#x1f951;二、依赖图谱Dependencies Graph1. 结果分析2. 分析所有模块的依赖关系&#x1f350;三、生成代码1. 逻…

不喜欢 merge 分叉,那就用 rebase 吧

阅读本文大概需要 3 分钟。有些人不喜欢 merge&#xff0c;因为在 merge 之后&#xff0c;commit 历史就会出现分叉&#xff0c;这种分叉再汇合的结构会让有些人觉得混乱而难以管理。如果你不希望 commit 历史出现分叉&#xff0c;可以用 rebase 来代替 merge。rebase &#xf…

你可能对position和z-index有一些误解

一文详解css中的position和z-index&#x1f9c3;序言&#x1f377;一、文章结构抢先知&#x1f378;二、position1. position的取值2. 标准文档流3. 各取值解析&#xff08;1&#xff09;static&#xff08;2&#xff09;relative&#xff08;3&#xff09;absolute&#xff08…

数据结构与算法专题——第九题 外排序

说到排序&#xff0c;大家第一反应基本上是内排序&#xff0c;是的&#xff0c;算法嘛&#xff0c;玩的就是内存&#xff0c;然而内存是有限制的&#xff0c;总有装不下的那一天&#xff0c;此时就可以来玩玩外排序&#xff0c;当然在我看来&#xff0c;外排序考验的是一个程序…

谁动了我的选择器?深入理解CSS选择器优先级

深入理解CSS选择器优先级&#x1f60f;序言&#x1f9d0;文章内容抢先看&#x1f910;一、基础知识1、为什么CSS选择器很强2、CSS选择器的一些基本概念&#xff08;1&#xff09;4种基本概念Ⅰ. 选择器Ⅱ. 选择符Ⅲ. 伪类Ⅳ. 伪元素&#xff08;2&#xff09;CSS选择器的命名空…

leetcode239. 滑动窗口最大值(思路+详解)

一&#xff1a;题目 二:思路 1.这个题不能用优先队列&#xff0c;虽然我们可以通过优先队列得到最大值&#xff0c;但是我们在移动 窗口的时候,便不可以正常的删除元素了 2.虽然不能用优先对列&#xff0c;但是我们依然希望可以得到队首的元素的时候是最大值&#xff0c;同时还…

《ASP.NET Core 与 RESTful API 开发实战》-- (第10章)-- 读书笔记

第 10 章 部署10.1 部署到 IISASP.NET Core 应用程序支持部署到 IIS 中&#xff0c;之后它将作为应用程序的反向代理服务器和负载均衡器&#xff0c;向应用程序中转传入的 HTTP 请求默认情况下&#xff0c;ASP.NET Core 项目的 Program 类使用如下方式创建 WebHostpublic stati…

翠香猕猴桃 和 薄皮核桃,快来下单

猴桃品种有很多&#xff0c;但不是所有的果子都叫翠香。椭圆形&#xff0c;果喙端较尖&#xff0c;黄褐色硬短茸毛&#xff1b;果肉翠绿色&#xff0c;质细多汁&#xff0c;香甜爽口&#xff0c;有芳香味&#xff0c;白色果心。这就是“翠香”&#xff0c;是集酸甜香于一身的猕…

你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList

一文了解DOM操作中的HTMLCollection和NodeList⛱️序言&#x1f388;一、基础知识1. 定义&#xff08;1&#xff09;HTMLCollection&#xff08;2&#xff09;NodeList2. 属性和方法&#xff08;1&#xff09;HTMLCollection&#xff08;2&#xff09;NodeList&#x1fa81;二、…

leetcode144. 二叉树的前序遍历(递归+迭代)

一:题目 二&#xff1a;上码 1&#xff1a;递归 class Solution { public:void preorder(TreeNode* root,vector<int>&v ) {if(root NULL) return;v.push_back(root->val);preorder(root->left,v);preorder(root->right,v);}vector<int> preorderT…

都说性能调优难?玩转这3款工具,让你秒变“老司机”!

鲁迅说过&#xff1a;菜鸟写业务&#xff0c;老鸟搭架构&#xff0c;高手玩调优。性能调优可谓是食物链顶端的技术&#xff0c;高薪面试必备良品。然而有不少的开发者&#xff0c;工作多年&#xff0c;却对性能调优几乎一无所知&#xff0c;今天就带大家掰扯掰扯&#xff0c;从…

一文梳理JavaScript中常见的七大继承方案

阐述JavaScript中常见的七大继承方案&#x1f4d6;序言&#x1f4d4;文章内容抢先看&#x1f4dd;一、基础知识预备1. 继承的定义2. 继承的方式&#x1f4da;二、6大常见继承方式1. 原型链继承 &#x1f4a1;&#xff08;1&#xff09;构造函数、原型和实例的关系&#xff08;2…

微软发布 Microsoft Edge 85 稳定版

喜欢就关注我们吧&#xff01;微软推出了 Microsoft Edge 85 稳定版&#xff08;85.0.564.41&#xff09;&#xff0c;现在正逐步向用户推送。此版本带来了以下新特性&#xff1a;收藏夹和设置的本地同步。现在可以在自己的环境中的 Active Directory 配置文件之间同步浏览器收…

leetcode94. 二叉树的中序遍历(左中右)

二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* Tre…