创作不易 拒绝白嫖 点个赞呗
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
主要概念
1.1 拆分配置和merge
npm init -y
yarn add -D webpack webpack-cli
yarn add -D webpack-merge
- build\webpack.common.js
- build\webpack.dev.js
- build\webpack.prod.js
公共配置
|
1 |
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span><span class="token punctuation">{<!-- --></span> entry<span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'src/index'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
开发时
|
1 |
<span class="token keyword">const</span> webpackCommon <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./webpack.common.js'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span> merge <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-merge'</span><span class="token punctuation">)</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>webpackCommon<span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> mode<span class="token operator">:</span> <span class="token string">'development'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
打包时
|
1 |
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> webpackCommon <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./webpack.common.js'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span> merge <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-merge'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span> CleanWebpackPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'clean-webpack-plugin'</span><span class="token punctuation">)</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>webpackCommon<span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> mode<span class="token operator">:</span> <span class="token string">'production'</span><span class="token punctuation">,</span> output<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> filename<span class="token operator">:</span> <span class="token string">'[name].[contenthash:8].js'</span><span class="token punctuation">,</span> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">CleanWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
|
1 |
<span class="token string">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token string">"dev"</span><span class="token operator">:</span> <span class="token string">"webpack-dev-server --config build/webpack.dev.js"</span><span class="token punctuation">,</span> <span class="token string">"build"</span><span class="token operator">:</span> <span class="token string">"webpack --config build/webpack.prod.js"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
新建src/index
执行 yarn build
1.2 启动本地服务
yarn add -D webpack-dev-server
webpack.dev.js
|
1 |
devServer<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> port<span class="token operator">:</span> <span class="token number">8080</span><span class="token punctuation">,</span> progress<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> contentBase<span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> compress<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> proxy<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
yarn dev
yarn add -D html-webpack-plugin
webpack.common.js
|
1 |
plugins<span class="token operator">:</span><span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> template<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'src/index.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> filename<span class="token operator">:</span> <span class="token string">'index.html'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">]</span> |
开发环境，会在内存中生成一个html文件
打包环境，会在dist下生成一个html文件
html文件会自动引入main.js
1.3 处理es6(配置babel)
yarn add -D babel-loader
yarn add -D @babel/core
yarn add -D @babel/preset-env
|
1 |
module<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> rules<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> include<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> exclude<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
1.4 处理css
css插入到页面的style标签
yarn add -D style-loader
yarn add -D css-loader
自动添加前缀
yarn add -D postcss-loader autoprefixer
build\webpack.common.js
|
1 |
<span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span> <span class="token string">'postcss-loader'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
postcss.config.js
|
1 |
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> |
1.5 处理图片
js文件中通过 import imgSrc from ‘./photo’； img.src = imgSrc引入
在css文件中作为背景图引入
在html文件中直接引入
yarn add -D file-loader
yarn add -D url-loader
build-base-conf\webpack.dev.js
|
1 |
<span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpg|jpeg|gif)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token string">'file-loader'</span> <span class="token punctuation">}</span> |
build-base-conf\webpack.prod.js
|
1 |
<span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpg|jpeg|gif)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> loader<span class="token operator">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span> options<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> limit<span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> outputPath<span class="token operator">:</span> <span class="token string">'/img1/'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
2.1 配置多入口
|
1 |
entry<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> index<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>srcPath<span class="token punctuation">,</span> <span class="token string">'index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> other<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>srcPath<span class="token punctuation">,</span> <span class="token string">'other.js'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
这里的index与other就是chunk名称
build-base-conf\webpack.prod.js
|
1 |
output<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> filename<span class="token operator">:</span> <span class="token string">'bundle.[contentHash:8].js'</span><span class="token punctuation">,</span> path<span class="token operator">:</span> distPath<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
注意这里只需要在prod里面加入配置，
dev不需要
|
1 |
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> template<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'src/index.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> filename<span class="token operator">:</span> <span class="token string">'index.html'</span><span class="token punctuation">,</span> chunks<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'index'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> template<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'src/other.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> filename<span class="token operator">:</span> <span class="token string">'other.html'</span><span class="token punctuation">,</span> chunks<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'other'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
2.2 抽离css(打包)
yarn add -D mini-css-extract-plugin
build\webpack.prod.js
|
1 |
<span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">[</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span> <span class="token string">'postcss-loader'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
2.3 压缩css（打包）
yarn add optimize-css-assets-webpack-plugin
build-min-extract-css\webpack.prod.js
|
1 |
optimization<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> minimizer<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">OptimizeCSSAssetsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> |
2.4 抽离公共代码
抽离公共代码
我们在开发多个页面的项目的时候，有时候会在几个页面中引用某些公共的模块，这些公共模块多次被下载会造成资源浪费，如果把这些公共模块抽离出来只需下载一次之后便缓存起来了，这样就可以避免因重复下载而浪费资源，那么怎么在webpack中抽离出公共部分呢？方法如下：
举例：
项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件，
page1.js 和 page2.js中同时都引用了a.js, b.js，
这时候想把a.js, b.js抽离出来合并成一个公共的js，然后在page1, page2中自动引入这个公共的js，
|
1 |
splitChunks<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> cacheGroups<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> common<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> chunks<span class="token operator">:</span> <span class="token string">'initial'</span><span class="token punctuation">,</span> minSize<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> minChunks<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
页面中有时会引入第三方模块，比如import $ from ‘jquery’; page1中需要引用，page2中也需要引用，这时候就可以用vendor把jquery抽离出来，方法如下：
|
1 |
optimization<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> splitChunks<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> chunks<span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span> cacheGroups<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> vendor<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> name<span class="token operator">:</span> <span class="token string">'vendor'</span><span class="token punctuation">,</span> priority<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> minSize<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> minChunks<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> common<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> name<span class="token operator">:</span> <span class="token string">'common'</span><span class="token punctuation">,</span> priority<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> minSize<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> minChunks<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
注意：这里需要配置权重 priority，因为抽离的时候会执行第一个common配置，入口处看到jquery也被公用了就一起抽离了，不会再执行wendor的配置了，所以加了权重之后会先抽离第三方模块，然后再抽离公共common的，这样就实现了第三方和公用的都被抽离了。
3.1 优化babal-loader(缩小构建目标)
Loader处理文件的转换操作是很耗时的，所以需要让尽可能少的文件被Loader处理
|
1 |
<span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'babel-loader?cacheDirectory'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> include<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> exclude<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span><span class="token string">' ./node_modules'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
3.2 happyPack 多进程打包
yarn add -D happypack
Plugins
|
1 |
<span class="token keyword">new</span> <span class="token class-name">HappyPack</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> id<span class="token operator">:</span> <span class="token string">"babel"</span><span class="token punctuation">,</span> loaders<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"babel-loader?cacheDirectory"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> threads<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">HappyPack</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> id<span class="token operator">:</span> <span class="token string">'styles'</span><span class="token punctuation">,</span> loaders<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'css-loader'</span><span class="token punctuation">,</span> <span class="token string">'postcss-loader'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> threads<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> verbose<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
rules
|
1 |
<span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(js|jsx)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"HappyPack/loader?id=babel"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> exclude<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">" ./node_modules"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token string">'happypack/loader?id=styles'</span><span class="token punctuation">,</span> include<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
3.3 ParallelUglifyPlugin优化压缩
webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。
所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。
yarn add -D webpack-parallel-uglify-plugin
|
1 |
<span class="token keyword">new</span> <span class="token class-name">ParallelUglifyPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> uglifyJS<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> output<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> beautify<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> comments<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> compress<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> drop_console<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> collapse_vars<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> reduce_vars<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
3.4 自动刷新
|
1 |
借助自动化的手段，在监听到本地源码文件发生变化时，自动重新构建出可运行的代码后再控制浏览器刷新。Webpack将这些功能都内置了，并且提供了多种方案供我们选择。 |
|
1 |
module<span class="token punctuation">.</span>export <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> watch<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> watchOptions<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> ignored<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> aggregateTimeout<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> poll<span class="token operator">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- 在 Webpack 中监听一个文件发生变化的原理是定时（可在watchOptions.poll中设置）的去获取这个文件的最后编辑时间，每次都存下最新的最后编辑时间，如果发现当前获取的和最后一次保存的最后编辑时间不一致，就认为该文件发生了变化
- 当发现某个文件发生了变化时，并不会立刻告诉监听者，而是先缓存起来，收集一段时间(可在watchOptions.aggregateTimeout中设置)的变化后，再一次性告诉监听者。防止在编辑代码的过程中可能会高频的输入文字导致文件变化的事件高频的发生
3.5 模块热更新
_ _DevServer 还支持一种叫做模块热替换（ Hot Module Replacement ）的技术可在不刷新整个网页的情况下做到超灵敏实时预览。原理是在一个源码发生变化时，只需重新编译发生变化的模块，再用新输出的模块替换掉浏览器中对应的老模块 。模块热替换技术在很大程度上提升了开发效率和体验 。
项目中模块热替换的配置：
|
1 |
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin'); devServer:{ host:'localhost', port:'8080', open:true//自动拉起浏览器 // 只设置hot只有cssHMR生效 hot:true,//热加载 //hotOnly:true }, plugins:[ //热更新插件 new webpack.HotModuleReplacementPlugin() ] HotModuleReplacementPlugin生成一个mainifest（一个json结构描述了发生变化的modules列表） 和update file（一个js文件包含修改后的代码内容） |
JS文件中
|
1 |
if (module.hot) { module.hot.accept('./print.js', function() { //告诉 webpack 接受热替换的模块 console.log('Accepting the updated printMe module!'); printMe(); }) } // 对Js生效 |
3.6 性能分析
|
1 |
<span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span> BundleAnalyzerPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-bundle-analyzer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> commonConfig <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> plugins<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">BundleAnalyzerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> analyzerPort<span class="token operator">:</span> <span class="token number">8889</span><span class="token punctuation">,</span> openAnalyzer<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
|
1 |
<span class="token keyword">const</span> SpeedMeasurePlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"speed-measure-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> smp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SpeedMeasurePlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">production</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span> <span class="token punctuation">(</span>production<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">const</span> endProdConfig <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>commonConfig<span class="token punctuation">,</span> prodConfig<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> smp<span class="token punctuation">.</span><span class="token function">wrap</span><span class="token punctuation">(</span>endProdConfig<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">const</span> endDevConfig <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>commonConfig<span class="token punctuation">,</span> devConfig<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> smp<span class="token punctuation">.</span><span class="token function">wrap</span><span class="token punctuation">(</span>endDevConfig<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
2020-10-10 webpack 5.0.0 发布了，但这并不意味着它已经完成了，没有 bug，甚至功能完整。 就像 webpack 4
一样，我们通过修复问题以及增加新特性来延续开发。 在接下来的日子里，可能会有很多 bug 修复。新特性可能也会出现。
尝试用持久性缓存来提高构建性能。 尝试用更好的算法和默认值来改进长期缓存。 尝试用更好的 Tree Shaking 和代码生成来改善包大小。
尝试改善与网络平台的兼容性。 尝试在不引入任何破坏性变化的情况下，清理那些在实现 v4 功能时处于奇怪状态的内部结构。
试图通过现在引入突破性的变化来为未来的功能做准备，使其能够尽可能长时间地保持在 v5 版本上。 迁移指南
微信扫一扫打赏
支付宝扫一扫打赏
