webpack支持es6吗

发布时间：2023-07-17 11:31:20 所属栏目：教程来源：未知

导读： 　　这篇文章主要介绍了webpack支不支持es6的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇webpack支不支持es6文章都会有所收获，下面我们一起来看看吧。

　　这篇文章主要介绍了webpack支不支持es6的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇webpack支不支持es6文章都会有所收获，下面我们一起来看看吧。

　　webpack支持es6。webpack 2支持原生的ES6模块语法，意味着开发者无须额外引入babel这样的工具，就可以使用import和export。但如果使用其他的ES6+特性，仍然需要引入babel工具。

　　模块方法

　　在 webpack 打包应用程序时，你可以选择各种模块语法风格，包括 ES6，CommonJS 和 AMD。

　　尽管 webpack 支持多种模块语法，但我们还是建议尽量使用一致的语法，以此避免一些奇怪的行为和 bug。事实上，当距离最近的 package.json 文件中包含值为 "module" 或 "commonjs" 的 "type" 字段时，webpack 会启用语法一致性检查。请大家在阅读前，注意此情况：

　　在 package.json 中为 .mjs 或 .js 设置 "type": "module"

　　不允许使用 CommonJS，例如，你不能使用 require，module.exports 或 exports

　　当引入文件时，强制编写扩展名，例如，你应使用 import './src/App.mjs'，而非 import './src/App'（你可以通过设置 Rule.resolve.fullySpecified 来禁用此规则)

　　在 package.json 中为 .cjs 或 .js 设置 "type": "commonjs"

　　import 和 export 均不可用

　　在 package.json 中为 .wasm 设置 "type": "module"

　　引入 wasm 文件时，必须编写文件扩展名

　　ES6 (推荐)

　　webpack 2 支持原生的 ES6 模块语法，意味着你无须额外引入 babel 这样的工具，就可以使用 import 和 export。但是注意，如果使用其他的 ES6+ 特性，仍然需要引入 babel。webpack 支持以下的方法：

　　import

　　通过 import 以静态的方式导入另一个通过 export 导出的模块。

　　import MyModule from './my-module.js';

　　import { NamedExport } from './other-module.js';

　　Warning：

　　这里的关键词是静态的。标准的 import 语句中，模块语句中不能以「具有逻辑或含有变量」的动态方式去引入其他模块。关于 import 的更多信息和 import() 动态用法。

　　你也通过 import 来引入 Data URI：

　　import 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7';

　　import {

　　 number,

　　 fn,

　　} from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

　　export

　　默认导出整个模块或具名导出模块。

　　// 具名导出

　　export var Count = 5;

　　export function Multiply(a, b) {

　　 return a * b;

　　}

　　// 默认导出

　　export default {

　　 // Some data...

　　};

　　import()

　　function(string path):Promise

　　动态的加载模块。调用 import 的之处，被视为分割点，意思是，被请求的模块和它引用的所有子模块，会分割到一个单独的 chunk 中。

　　Tip：

　　ES2015 Loader 规范定义了 import() 方法，可以在运行时动态地加载 ES2015 模块。

　　if (module.hot) {

　　 import('lodash').then((_) => {

　　 // Do something with lodash (a.k.a '_')...

　　 });

　　}

　　Warning：

　　import() 特性依赖于内置的 Promise。如果想在低版本浏览器中使用 import()，记得使用像 es6-promise 或者 promise-polyfill 这样 polyfill 库，来预先填充(shim) Promise 环境。

　　import() 中的表达式

　　不能使用完全动态的 import 语句，例如 import(foo)。是因为 foo 可能是系统或项目中任何文件的任何路径。

　　import() 必须至少包含一些关于模块的路径信息。打包可以限定于一个特定的目录或文件集，以便于在使用动态表达式时 - 包括可能在 import() 调用中请求的每个模块。例如， import(`./locale/${language}.json`) 会把 .locale 目录中的每个 .json 文件打包到新的 chunk 中。在运行时，计算完变量 language 后，就可以使用像 english.json 或 german.json 的任何文件。

　　// 想象我们有一个从 cookies 或其他存储中获取语言的方法

　　const language = detectVisitorLanguage();

　　import(`./locale/${language}.json`).then((module) => {

　　 // do something with the translations

　　});

　　Tip：

　　使用 webpackInclude and webpackExclude 选项可让你添加正则表达式模式，以减少 webpack 打包导入的文件数量。

　　Magic Comments

　　内联注释使这一特性得以实现。通过在 import 中添加注释，我们可以进行诸如给 chunk 命名或选择不同模式的操作。

　　// 单个目标

　　import(

　　 /* webpackChunkName: "my-chunk-name" */

　　 /* webpackMode: "lazy" */

　　 /* webpackExports: ["default", "named"] */

　　 'module'

　　);

　　// 多个可能的目标

　　import(

　　 /* webpackInclude: /\.json$/ */

　　 /* webpackExclude: /\.noimport\.json$/ */

　　 /* webpackChunkName: "my-chunk-name" */

　　 /* webpackMode: "lazy" */

　　 /* webpackPrefetch: true */

　　 /* webpackPreload: true */

　　 `./locale/${language}`

　　);

　　import(/* webpackIgnore: true */ 'ignored-module.js');

　　webpackIgnore：设置为 true 时，禁用动态导入解析。

　　Warning：

　　注意：将 webpackIgnore 设置为 true 则不进行代码分割。

　　webpackChunkName: 新 chunk 的名称。从 webpack 2.6.0 开始，占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。添加此注释后，将单独的给我们的 chunk 命名为 [my-chunk-name].js 而不是 [id].js。

　　webpackMode：从 webpack 2.6.0 开始，可以指定以不同的模式解析动态导入。支持以下选项：

　　'lazy' (默认值)：为每个 import() 导入的模块生成一个可延迟加载（lazy-loadable）的 chunk。

　　'lazy-once'：生成一个可以满足所有 import() 调用的单个可延迟加载（lazy-loadable）的 chunk。此 chunk 将在第一次 import() 时调用时获取，随后的 import() 则使用相同的网络响应。注意，这种模式仅在部分动态语句中有意义，例如 import(`./locales/${language}.json`)，其中可能含有多个被请求的模块路径。

　　'eager'：不会生成额外的 chunk。所有的模块都被当前的 chunk 引入，并且没有额外的网络请求。但是仍会返回一个 resolved 状态的 Promise。与静态导入相比，在调用 import() 完成之前，该模块不会被执行。

　　'weak'：尝试加载模块，如果该模块函数已经以其他方式加载，（即另一个 chunk 导入过此模块，或包含模块的脚本被加载）。仍会返回 Promise，但是只有在客户端上已经有该 chunk 时才会成功解析。如果该模块不可用，则返回 rejected 状态的 Promise，且网络请求永远都不会执行。当需要的 chunks 始终在（嵌入在页面中的）初始请求中手动提供，而不是在应用程序导航在最初没有提供的模块导入的情况下触发，这对于通用渲染（SSR）是非常有用的。

　　webpackPrefetch：告诉浏览器将来可能需要该资源来进行某些导航跳转。

　　webpackPreload：告诉浏览器在当前导航期间可能需要该资源。

　　webpackInclude：在导入解析（import resolution）过程中，用于匹配的正则表达式。只有匹配到的模块才会被打包。

　　webpackExclude：在导入解析（import resolution）过程中，用于匹配的正则表达式。所有匹配到的模块都不会被打包。

　　webpackExports: 告知 webpack 只构建指定出口的动态 import() 模块。它可以减小 chunk 的大小。从 webpack 5.0.0-beta.18 起可用。

（编辑：应用网_常德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!