webpack 5 带来的全新改变

Posted 2021-10-11 吃颗草莓糖

安装 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;