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