装置 webpack-dev-server
npm install webpack-dev-server -D
在 webpack 配置文件中配置服务：
devServer:{
port: 8080,
open: true,
},
启动区别
// weebpack 5″start”: “webpack serve”
// weebpack 4″start”: “webpack-dev-server”
资源模块解决
资源模块 (asset module) 是一种模块类型，它容许应用资源文件（字体，图标等）而无需配置额定 loader。
在 webpack 5 之前，通常应用：
raw-loader 将文件导入为字符串
url-loader 将文件作为 data URI 内联到 bundle 中
file-loader 将文件发送到输入目录
资源模块类型(asset module type)，通过增加 4 种新的模块类型，来替换所有这些 loader：
asset/resource 发送一个站长博客独自的文件并导出 URL。之前通过应用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过应用 url-loader 实现。
asset/source 导出资源的源代码。之前通过应用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个独自的文件之间主动抉择。之前通过应用 url-loader，并且配置资源体积限度实现。
区别
// webpack 4module:{rules:[
{
test:/.(png|jpg|gif)$/,
// 此处须要装置 url-loader file-loader loader:’url-loader’,
options:{
// 小于 8KB 转 base64
limit:8*1024
}
}
]
},
// webpack 5 module:{rules:[{
test:/.(png|jpg|gif)$/,
// 通用资源类型, 不须要装置 loader
type:’asset’,
// 当初，webpack 将依照默认条件，主动地在 resource 和 inline 之间进行抉择
// 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类
// 自定义设置
// 小于 8KB 转 base64
parser:{
dataUrlCondition:{
maxSize:8*1024
}
}
}]
},
当在 webpack 5 中应用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想进行以后 asset 模块的解决，并再次启动解决，这可能会导致 asset 反复，你能够通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。
module.exports = {
module: {
rules: [
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192,
}
},
],+ type: ‘javascript/auto’
},
]
},}
文件缓存
缓存生成的 webpack 模块和 chunk，来改善构建速度。cache 会在开发 模式被设置成 type: ‘memory’ 而且在 生产 模式 中被禁用。
cache: true 与 cache: {type: ‘memory’} 配置作用统一。
传入 false 会禁用缓存
cache.type
cache.type 将 cache 类型设置成内存或者文件系统。
‘memory’ | ‘filesystem’
memory 选项很简略，它会通知 webpack 将内容寄存在内存中并且不容许额定的配置;
filesystem 选项，应用文件缓存零碎;
cacheDirectory
cacheDirectory 定义缓存目录，默认为 node_modules/.cache/webpack。
❝
cache.cacheDirectory 选项仅当 cache.type 被设置成 filesystem 才可用。
❞
// const path = require(‘path’);
module.exports = {
//…
cache: {
type: ‘filesystem’,
// cacheDirectory: path.resolve(__dirname, ‘.temp_cache’)
}
};
Tree Shaking
tree shaking 是一个术语，「通常用于形容移除 JavaScript 上下文中的未援用代码(dead-code)。」它依赖于 ES2015 模块语法的 动态构造 个性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 遍及起来的。
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’),
},
// production、development、none
// production 生产环境，默认优化打包
// none 不做任何操作
mode: ‘development’,
optimization: {
usedExports: true, // usedExports:true 开启优化(树摇但保留代码)
minimize:true, // minimize:true 开启压缩 (删除未应用代码)
// sideEffects 将文件标记为副作用
},
};
模块联邦
Webpack5 模块联邦让 Webpack 达到了线上 Runtime 的成果，让代码间接在我的项目间利用 CDN 间接共享，不再须要本地装置 Npm 包、构建再公布了！
这通常被称作微前端，但并不仅限于此;
src/index.js
import React from ‘react’;import ReactDom from ‘react-dom’;import App from ‘./App’;
ReactDom.render(<App />, document.getElementById(‘root’));
src/App.js
import React from ‘react’;import User from ‘./User’;
const App = () => {
return (
<div>
这是 app
<User />
</div>
);
}
export default App;
src/User.js
import React from ‘react’;
const User = () => {
return (<div> 用户列表 </div>);
}
export default User;
导出模块
const ModuleFederationPlugin = require(‘webpack’).container.ModuleFederationPlugin;
module.exports = {
// …
plugins: [
new ModuleFederationPlugin({
// 模块名字
name: ‘remote’, // 导入时须要应用的名称标注
filename: ‘remoteEntry.js’, // 编译后的模块文件名，导入时应用
// 导出模块 关键字与模块名
exposes: {
// key 导入时应用的关键字：对应模块文件
‘./User’: ‘./src/User.js’,
}
})
],
// …
};
导入模块
const ModuleFederationPlugin = require(‘webpack’).container.ModuleFederationPlugin;
module.exports = {
// …
plugins: [
new ModuleFederationPlugin({
name: ‘remoteFile’,
// 导入内部模块
remotes: {
// 导入别名：关键字 @地址 / 导出文件名
remoteHost: ‘remotremoteEntry.js’
}
})
],
// …
};
import React from ‘react’;const User = React.lazy(() => import(“remoteHost/User”))
const App = () => {
return (
<div>
这是 app
<React.Suspense fallback=” 正在加载 …”>
<User />
</React.Suspense>
</div>
);
}
export default App;