Erlo

webpack 5 带来的全新改变

2021-01-26 10:00:12 发布   534 浏览  
页面报错/反馈
收藏 点赞

启动命令

安装 webpack-dev-server

npm install webpack-dev-server -D

在 webpack配置文件中配置服务:

devServer:{
    port8080,
    opentrue,
},

启动区别

// 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 4
module:{
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: {
        usedExportstrue// 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'remote@http://127.0.0.1:3004/remoteEntry.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;

文件缓存

 
登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认