웹팩은 es6을 지원하나요?

webpack은 es6을 지원합니다. Webpack 2는 기본 ES6 모듈 구문을 지원하므로 개발자는 babel과 같은 추가 도구를 도입하지 않고도 가져오기 및 내보내기를 사용할 수 있습니다. 그러나 다른 ES6+ 기능을 사용하는 경우에도 Babel 도구를 도입해야 합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

모듈 방법

---

웹팩으로 애플리케이션을 패키징할 때 ES6, CommonJS, AMD를 포함한 다양한 모듈 구문 스타일 중에서 선택할 수 있습니다.

webpack은 여러 모듈 구문을 지원하지만 이상한 동작과 버그를 피하기 위해 가능한 한 일관된 구문을 사용하는 것이 좋습니다. 실제로 webpack은 가장 가까운 package.json 파일에 "module" 또는 "commonjs" 값을 가진 "type" 필드가 포함된 경우 구문 일관성 검사를 활성화합니다. 읽기 전에 다음 사항에 유의하십시오.

• package.json

  • 에서 .mjs 또는 .js에 대해 "type": "module"을 설정합니다. 예를 들어, require, module .exports 또는 내보내기를 사용할 수 없습니다.

  • 파일을 가져올 때 확장 프로그램을 강제로 작성해야 합니다. 예를 들어 import './src/App' 대신 import './src/App.mjs'를 사용해야 합니다(.resolve.fullSpecified로 규칙을 설정하여 비활성화할 수 있음). 이 규칙)

• .cjs 또는 .js용 package.json에서 "type": "commonjs" 설정

  • 가져오기나 내보내기 모두 사용할 수 없습니다

• "type" 설정: "module " for .wasm in package.json

  • wasm 파일을 도입할 때 파일 확장자를 작성해야 합니다

ES6(권장)

---

webpack 2는 기본 ES6 모듈 구문을 지원합니다. Babel과 같은 추가 도구를 도입하지 않고도 가져오기 및 내보내기를 사용할 수 있습니다. 하지만 다른 ES6+ 기능을 사용하는 경우에도 babel을 가져와야 합니다. webpack은 다음 방법을 지원합니다:

import

import를 사용하여 import를 통해 내보낸 다른 모듈을 정적으로 가져옵니다.

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

경고:

여기의 키워드는 정적입니다. 표준 import 문에서 모듈 문은 "논리를 갖거나 변수를 포함하는" 동적 방식으로 다른 모듈을 도입할 수 없습니다. import()의 가져오기 및 동적 사용에 대한 추가 정보입니다.

가져오기를 통해 데이터 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):Promisefunction(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

동적 로딩 모듈. import가 호출되는 지점은 분할 지점으로 간주됩니다. 즉, 요청된 모듈과 해당 모듈이 참조하는 모든 하위 모듈이 단일 청크로 분할된다는 의미입니다.

팁:

ES2015 로더 사양은 런타임에 ES2015 모듈을 동적으로 로드할 수 있는 import() 메서드를 정의합니다. 🎜🎜rrreee🎜🎜경고: 🎜🎜import() 기능은 내장된 Promise에 의존합니다. 이전 브라우저에서 import()를 사용하려면 es6-promise 또는 promise-polyfill과 같은 폴리필 라이브러리를 사용하여 Promise 환경을 미리 채우는(shim) 것을 기억하세요. 🎜🎜🎜🎜🎜import() 🎜🎜🎜🎜의 표현식은 import(foo)와 같은 완전히 동적 import 문을 사용할 수 없습니다. foo는 시스템이나 프로젝트의 모든 파일에 대한 경로가 될 수 있기 때문입니다. 🎜🎜import()에는 모듈에 대한 경로 정보가 최소한 일부 포함되어 있어야 합니다. 패키징은 특정 디렉터리나 파일 집합으로 제한될 수 있으므로 동적 표현식을 사용할 때 import() 호출에서 요청할 수 있는 모든 모듈이 포함됩니다. 예를 들어 import(`./locale/${언어}.json`)은 .locale 디렉터리의 각 .json 파일을 새 청크로 패키지합니다. 런타임 시 변수 언어가 평가된 후 english.json 또는 german.json과 같은 모든 파일을 사용할 수 있습니다. 🎜rrreee🎜🎜팁: 🎜🎜webpackInclude 및 webpackExclude 옵션을 사용하면 정규식 패턴을 추가하여 webpack에서 가져오는 파일 수를 줄일 수 있습니다. 🎜🎜🎜🎜🎜Magic Comments🎜🎜🎜🎜인라인 댓글을 사용하면 이 기능이 가능합니다. 가져오기에 주석을 추가하면 청크 이름을 지정하거나 다른 모드를 선택하는 등의 작업을 수행할 수 있습니다. 🎜rrreeerrreee🎜webpackIgnore: true로 설정하면 동적 가져오기 구문 분석이 비활성화됩니다. 🎜🎜🎜경고: 🎜🎜참고: webpackIgnore를 true로 설정하면 코드 분할이 수행되지 않습니다. 🎜

webpackChunkName: 새 청크의 이름입니다. webpack 2.6.0부터 자리 표시자 [index] 및 [request]는 각각 증가된 숫자 또는 실제 구문 분석된 파일 이름을 지원합니다. 이 주석을 추가하면 우리에게 제공된 개별 청크의 이름은 [id].js 대신 [my-chunk-name].js로 지정됩니다. 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

webpackMode: webpack 2.6.0부터 동적 가져오기를 구문 분석하기 위해 다양한 모드를 지정할 수 있습니다. 다음 옵션이 지원됩니다:

• 'lazy' (기본값): import() 가져온 모듈마다 하나씩 생성 Lazy -로드 가능한 청크.
• 'lazy-once': 모든 import() 호출을 충족할 수 있는 단일 지연 로드 가능 청크를 생성합니다. 이 청크는 첫 번째 import() 호출에서 획득되며 후속 import()는 동일한 네트워크 응답을 사용합니다. 이 모드는 요청된 모듈 경로가 여러 개 포함될 수 있는 import(`./locales/${언어}.json`)와 같은 일부 동적 문에서만 의미가 있습니다.
• 'eager': 추가 청크가 생성되지 않습니다. 모든 모듈은 현재 청크에서 가져오며 추가 네트워크 요청은 이루어지지 않습니다. 그러나 해결된 상태의 Promise는 여전히 반환됩니다. 정적 가져오기와 달리 import() 호출이 완료될 때까지 모듈은 실행되지 않습니다. 🎜
• 🎜'weak': 모듈 함수가 다른 방법으로 로드된 경우 모듈을 로드해 보십시오(즉, 다른 청크가 이 모듈을 가져왔거나 다음을 포함하는 스크립트). 모듈이 로드되었습니다.) Promise는 여전히 반환되지만 청크가 클라이언트에서 이미 사용 가능한 경우에만 성공적으로 해결됩니다. 모듈을 사용할 수 없으면 거부된 Promise가 반환되고 네트워크 요청은 실행되지 않습니다. 이는 처음에 제공되지 않은 모듈 가져오기에서 애플리케이션 탐색이 트리거되는 경우가 아니라 필요한 청크가 항상 초기 요청(페이지에 포함됨)에서 수동으로 제공되는 경우 유니버설 렌더링(SSR)에 유용합니다. 🎜

🎜webpackPrefetch: 향후 특정 탐색 점프에 이 리소스가 필요할 수 있음을 브라우저에 알립니다. 🎜🎜webpackPreload: 현재 탐색 중에 리소스가 필요할 수 있음을 브라우저에 알립니다. 🎜🎜webpackInclude: 가져오기 확인 중 일치에 사용되는 정규식입니다. 일치하는 모듈만 패키징됩니다. 🎜🎜webpackExclude: 가져오기 확인 중 일치에 사용되는 정규식입니다. 일치하는 모든 모듈이 패키징되지 않습니다. 🎜🎜webpackExports: 지정된 내보내기가 있는 동적 import() 모듈만 빌드하도록 webpack에 지시합니다. 청크 크기를 줄일 수 있습니다. webpack 5.0.0-beta.18 이상부터 사용 가능합니다. 🎜🎜【관련 권장 사항: 🎜javascript 학습 튜토리얼🎜🎜】🎜🎜

위 내용은 웹팩은 es6을 지원하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!