Webpack 시작하기: 1부

요즘 웹 사이트를 구축할 때 개발 작업을 수행하고 라이브 환경을 위한 파일을 준비하는 데 도움이 되는 일종의 구축 프로세스를 갖는 것이 꽤 표준적인 관행입니다.

Grunt 또는 Gulp를 사용하여 한쪽 끝에 코드를 배치하고 다른 쪽 끝에는 축소된 CSS 및 JavaScript를 얻을 수 있는 일련의 변환을 구축하여 이 작업을 수행할 수 있습니다.

이 도구는 매우 인기가 있고 매우 유용합니다. 그러나 또 다른 방법이 있는데 그것은 Webpack을 사용하는 것입니다.

웹팩이란 무엇인가요?

Webpack은 소위 "모듈 번들러"입니다. JavaScript 모듈을 사용하여 해당 종속성을 이해한 다음 가장 효율적인 방법으로 함께 연결하고 마지막으로 JS 파일을 생성합니다. 특별한 건 없어요, 그렇죠? RequireJS와 같은 작업은 수년간 이 작업을 수행해 왔습니다.

글쎄, 문제는 이렇습니다. Webpack을 사용하면 모듈이 더 이상 JavaScript 파일로 제한되지 않습니다. Loaders를 사용함으로써 Webpack은 JavaScript 모듈에 CSS 파일이 필요할 수 있고 CSS 파일에 이미지가 필요할 수 있음을 알고 있습니다. 출력 자산에는 필요한 것만 포함되므로 큰 문제가 발생하지 않습니다. 실제로 작동하는 모습을 볼 수 있도록 설정을 시작해 보겠습니다.

설치

대부분의 개발 도구와 마찬가지로 계속하려면 Node.js를 설치해야 합니다. 올바르게 설정했다고 가정하면 Webpack을 설치하기 위해 해야 할 일은 명령줄에 다음을 입력하는 것뿐입니다.

으아아아

이렇게 하면 Webpack이 설치되고 시스템 어디에서나 실행할 수 있습니다. 다음으로, 새 디렉터리를 만들고 다음과 같이 기본 HTML 파일을 만듭니다.

으아아아

여기서 중요한 부분은 bundle.js에 대한 참조입니다. 이것이 Webpack이 우리를 위해 만들어 줄 것입니다. 또한 H2 요소에 주목하세요. 나중에 이것을 사용할 것입니다.

다음으로 HTML 파일과 동일한 디렉터리에 두 개의 파일을 만듭니다. 첫 번째 이름을 지정하세요 main.js，您可以想象它是我们脚本的主要入口点。然后将第二个say-hello.js. 이는 사람의 이름과 DOM 요소를 가져와 해당 요소에 환영 메시지를 삽입하는 간단한 모듈입니다.

으아아아

이제 main.js에서 가져오고 호출할 수 있는 간단한 모듈이 생겼습니다. 다음을 수행하면 쉽습니다.

으아아아

이제 HTML 파일을 열면 main.js 也没有编译浏览器的依赖项。我们需要做的是让 Webpack 查看 main.js을 포함하지 않았거나 브라우저 종속성을 컴파일하지 않았기 때문에 분명히 이 메시지가 표시되지 않습니다. 우리가 해야 할 일은 Webpack에게

을 보고 종속성이 있는지 확인하도록 요청하는 것입니다. 그렇다면 이를 함께 컴파일하고 브라우저에서 사용할 수 있는 Bundle.js 파일을 생성해야 합니다.

터미널로 돌아가서 Webpack을 실행하세요. 그냥 입력하세요:

으아아아 bundle.js지정된 첫 번째 파일은 Webpack이 종속성 검색을 시작하려는 항목 파일입니다. 필요한 파일에 다른 파일이 필요한지 여부를 파악하고 필요한 모든 종속성이 계산될 때까지 계속해서 파악합니다. 완료되면 종속성을

에 연결된 단일 파일로 출력합니다. Enter를 누르면 다음과 같은 내용이 표시됩니다.

으아아아 index.html이제 브라우저에서

을 열어 인사하는 페이지를 확인하세요.

구성

webpack.config.jsWebpack을 실행할 때마다 입력 및 출력 파일을 지정하는 것은 별로 재미가 없습니다. 고맙게도 Webpack은 구성 파일을 사용할 수 있도록 하여 문제를 해결해 줍니다. 다음 내용으로 프로젝트의 루트 디렉터리에

라는 파일을 만듭니다.

으아아아 webpack이제

만 입력해도 동일한 결과를 얻을 수 있습니다.

개발 서버

webpack그게 뭐죠? 파일을 변경할 때마다

를 입력해야 합니까? 모르겠어요 요즘 세대는 어쩌고 저쩌고. 좋습니다. 작업 효율성을 높이기 위해 소규모 개발 서버를 설정해 보겠습니다. 터미널에 다음을 입력하세요:

으아아아 webpack-dev-server그런 다음

명령을 실행하세요. 그러면 현재 디렉터리를 파일을 제공할 위치로 사용하여 간단한 웹 서버 실행이 시작됩니다. 새 브라우저 창을 열고 http://localhost:8080/webpack-dev-server/를 방문하십시오. 모든 것이 잘 진행되면 다음과 같은 내용이 표시됩니다.

이제 멋진 작은 웹 서버뿐 아니라 코드 변경 사항을 모니터링할 수 있는 서버도 생겼습니다. 파일이 변경된 것을 확인하면 자동으로 webpack 명령을 실행하여 코드를 묶고 아무 것도 하지 않고도 페이지를 새로 고칩니다. 모두 제로 구성입니다.

sayHello 사용해 보고

함수에 전달된 이름을 변경한 다음 브라우저로 다시 전환하여 변경 사항이 즉시 적용되는지 확인하세요. 🎜

装载机

Webpack 最重要的功能之一是加载器。加载器类似于 Grunt 和 Gulp 中的“任务”。它们本质上是获取文件并以某种方式对其进行转换，然后再将其包含在我们的捆绑代码中。

假设我们想在代码中使用 ES2015 的一些优点。 ES2015 是 JavaScript 的新版本，并非所有浏览器都支持，因此我们需要使用加载器将 ES2015 代码转换为支持的普通旧 ES5 代码。为此，我们使用流行的 Babel Loader，根据说明，我们安装如下：

npm install babel-loader babel-core babel-preset-es2015 --save-dev

这不仅会安装加载器本​​身，还会安装其依赖项和 ES2015 预设，因为 Babel 需要知道它正在转换的 JavaScript 类型。

现在加载器已安装，我们只需要告诉 Babel 使用它即可。更新 webpack.config.js 使其看起来像这样：

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ],
    }
};

这里有一些重要的事情需要注意。第一个是 test: /\.js$/ 行，它是一个正则表达式，告诉我们将此加载程序应用于所有具有 .js 扩展名的文件。同样，exclude: /node_modules/ 告诉 Webpack 忽略 node_modules 目录。 loader 和 query 是相当不言自明的——使用带有 ES2015 预设的 Babel 加载器。

按 ctrl+c 并再次运行 webpack-dev-server 重新启动您的 Web 服务器。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将 sayHello 变量更改为常量？

const sayHello = require('./say-hello')

保存后，Webpack 应该会自动重新编译您的代码并刷新您的浏览器。希望您不会看到任何变化。查看 bundle.js 并查看是否可以找到 const 关键字。如果 Webpack 和 Babel 已经完成了它们的工作，您将不会在任何地方看到它——只是普通的旧 JavaScript。

进入第 2 部分

在本教程的第 2 部分中，我们将介绍如何使用 Webpack 将 CSS 和图像添加到您的页面，以及让您的网站做好部署准备。

위 내용은 Webpack 시작하기: 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!