Webpack에 대한 이해 심화: 2부

이전 튜토리얼에서는 Webpack 프로젝트를 설정하는 방법과 로더를 사용하여 JavaScript를 처리하는 방법을 배웠습니다. 하지만 Webpack의 가장 빛나는 점은 다른 유형의 정적 리소스(예: CSS 및 이미지)를 번들로 묶어 필요할 때만 프로젝트에 포함시키는 기능입니다. 페이지에 몇 가지 스타일을 추가하는 것부터 시작해 보겠습니다.

스타일 로더

먼저 스타일 디렉터리에 일반 CSS 파일을 만듭니다. main.css를 호출하고 제목 요소에 대한 스타일 규칙을 추가합니다.

으아악

그렇다면 이 스타일시트를 페이지에 어떻게 넣을 수 있을까요? 글쎄, Webpack의 대부분의 경우와 마찬가지로 또 다른 로더가 필요합니다. 실제로는 CSS 로더와 스타일 로더 두 가지가 있습니다. 첫 번째는 CSS 파일에서 모든 스타일을 읽는 반면, 다른 하나는 해당 스타일을 HTML 페이지에 삽입합니다. 다음과 같이 설치하세요:

으아악

다음으로 Webpack의 사용법을 알려드리겠습니다. webpack.config.js에서는 로더 배열에 다른 객체를 추가해야 합니다. 여기에는 CSS 파일만 일치시키는 테스트를 추가하고 사용할 로더를 지정하겠습니다.

으아악

이 코드 조각의 흥미로운 부분은 파일 끝에 'style!css' 行。加载器是从右向左读取的，因此这告诉 Webpack 首先读取以 .css 스타일을 추가하고 해당 스타일을 페이지에 삽입한다는 것입니다.

구성 파일을 업데이트했으므로 변경 사항을 적용하려면 개발 서버를 다시 시작해야 합니다. ctrl+c 停止服务器并使用 webpack-dev-server를 사용하여 서버를 다시 시작하세요.

지금 해야 할 일은 main.js 파일에서 스타일시트를 가져오는 것뿐입니다. 다른 JavaScript 모듈과 동일한 방식으로 이 작업을 수행합니다.

으아악

저희는 페이지를 건드리지도 index.html。打开浏览器即可看到样式为 h2않았다는 점에 유의하세요. 스타일 시트의 헤더 색상을 변경하면 새로 고침 없이 즉시 업데이트됩니다. 귀여운.

소리쳐야지

“하지만 요즘에는 CSS를 사용하는 사람이 없어요, 할아버지! 물론. 다행히 Webpack에는 이를 수행하는 로더가 있습니다. 다음 명령을 사용하여 Sass의 노드 버전과 함께 설치하세요:

으아악

그런 다음 업데이트 webpack.config.js:

으아악

이제 의미하는 바는 .scss로 끝나는 파일의 경우 Sass를 순수 CSS로 변환하고 CSS에서 스타일을 읽은 다음 해당 스타일을 페이지에 삽입한다는 것입니다. .scss 结尾的文件，将 Sass 转换为纯 CSS，从 CSS 中读取样式，然后将样式插入到页面中。请记住将 main.css 重命名为 main.scss의 이름을 main.scss로 바꾸고 새로 이름이 지정된 파일이 필요하다는 점을 기억하세요. 먼저 Sass를 좀 들어보세요:

으아악

그 다음 main.js:

으아악

슈퍼. 그렇게 간단합니다. 파일을 변환하고 저장할 필요도 없고 폴더를 볼 필요도 없습니다. Sass 스타일을 직접 입력하면 됩니다.

사진

"그럼 이미지도 마찬가지겠죠, 로더?" 이미지의 경우 url-loader를 사용하겠습니다. 이 로더는 이미지의 상대 URL을 가져와 패키지에 올바르게 포함되도록 경로를 업데이트합니다. 평소대로:

으아악

이제 webpack.config.js에서 뭔가 다른 것을 시도해 보겠습니다. 일반적인 방법으로 로더 배열에 또 다른 항목을 추가하되, 이번에는 정규식이 다른 파일 확장자를 가진 이미지와 일치하도록 하려고 합니다.

으아악

여기서 또 다른 차이점을 확인하세요. 우리는 exclude 键。相反，我们使用 include를 사용하지 않습니다. 이는 "images"라는 폴더와 일치하지 않는 모든 항목을 무시하도록 webpack에 지시하기 때문에 더 효율적입니다.

일반적으로 HTML 뷰를 생성하기 위해 일종의 템플릿 시스템을 사용하겠지만, 우리는 이를 기본으로 유지하고 예전 방식으로 JavaScript로 이미지 마크업을 생성할 것입니다. 먼저 이미지 요소를 생성하고 필요한 이미지를 src 속성에 설정한 다음 해당 요소를 페이지에 추가합니다.

으아악

브라우저로 돌아가면 이미지가 앞에 나타납니다!

프리로더

개발 중에 자주 수행되는 또 다른 작업은 Linting입니다. Linting은 코드에서 잠재적인 오류를 찾고 특정 코딩 규칙을 따르고 있는지 확인하는 방법입니다. 당신이 찾고 싶은 것은 "변수를 먼저 선언하지 않고 사용했나요?" 또는 "줄 끝의 세미콜론을 잊었나요?"입니다. 이러한 규칙을 적용하면 어리석은 실수를 조기에 제거할 수 있습니다.

JSHint 是一种流行的 linting 工具。这会检查我们的代码并突出显示我们所犯的潜在错误。 JSHint 可以在命令行手动运行，但这很快就会成为开发过程中的一件苦差事。理想情况下，我们希望它在每次保存文件时自动运行。我们的 Webpack 服务器已经在留意变化，所以是的，你猜对了——另一个加载器。

按照通常的方式安装jshint-loader：

 npm install jshint-loader

我们必须再次将其添加到我们的 webpack.config.js 中来告诉 Webpack 使用它。然而，这个加载器略有不同。它实际上并没有转换任何代码——只是看看。我们也不希望所有较重的代码修改加载器仅仅因为忘记了分号而运行并失败。这就是预加载器的用武之地。预加载器是我们指定在主要任务之前运行的任何加载器。它们以与加载器类似的方式添加到我们的 webpack.conf.js 中。

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

现在，如果检测到问题，我们的 linting 过程会立即运行并失败。在重新启动 Web 服务器之前，我们需要告诉 JSHint 我们正在使用 ES6，否则当它看到我们正在使用的 const 关键字时将会失败。

在配置中的模块键之后，添加另一个名为“jshint”的条目和一行来指定 JavaScript 的版本。

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

保存文件并重新启动webpack-dev-server。运行还好吗？伟大的。这意味着您的代码不包含错误。让我们通过删除这一行中的分号来介绍一个：

var imgElement = document.createElement('img')

再次保存文件并查看终端。现在我们得到了这个：

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47

谢谢，JSHint！

准备生产

现在我们很高兴我们的代码已经成型并且它完成了我们想要的一切，我们需要为现实世界做好准备。上线代码时最常见的事情之一就是缩小代码，将所有文件连接成一个，然后将其压缩到尽可能小的文件中。在继续之前，请查看您当前的 bundle.js。它可读，有大量空白，大小为 32kb。

“等等！别告诉我。另一个装载机，对吧？”没有！在这种罕见的情况下，我们不需要装载机。 Webpack 内置了缩小功能。一旦您对代码感到满意，只需运行以下命令：

webpack -p

-p 标志告诉 Webpack 让我们的代码为生产做好准备。当它生成捆绑包时，它会尽可能地进行优化。运行此命令后，打开 bundle.js，您会看到它全部被压缩在一起，即使使用如此少量的代码，我们也节省了 10kb。

摘要

我希望这个由两部分组成的教程能让您有足够的信心在自己的项目中使用 Webpack。请记住，如果您想在构建过程中执行某些操作，那么 Webpack 很可能有一个加载器。所有加载器都是通过 npm 安装的，因此请查看那里是否有人已经制作了您需要的内容。

玩得开心！

위 내용은 Webpack에 대한 이해 심화: 2부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!