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이 종속성 검색을 시작하려는 항목 파일입니다. 필요한 파일에 다른 파일이 필요한지 여부를 파악하고 필요한 모든 종속성이 계산될 때까지 계속해서 파악합니다. 완료되면 종속성을

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

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

으아아아 webpack이제

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!