webpack2 및 모듈 패키징 관련 문제 요약-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

webpack2 및 모듈 패키징 관련 문제 요약

巴扎黑

Aug 11, 2017 am 10:49 AM

web관련된

이 글은 webpack2와 모듈 패키징에 대한 초보자 가이드(요약)를 주로 소개하고 있으며, 관심 있는 친구들이 참고할 수 있는 내용입니다.

webpack은 현대 웹 개발에서 가장 중요한 도구 중 하나가 되었습니다. JavaScript용 모듈 패키징 도구이지만 HTML, CSS 등 모든 프런트엔드 리소스는 물론 이미지까지 변환할 수도 있습니다. 이를 통해 애플리케이션이 수행하는 HTTP 요청 수를 더 효과적으로 제어할 수 있으며 다른 리소스(예: Jade, Sass 및 ES6)의 기능을 사용할 수 있습니다. webpack을 사용하면 npm에서 패키지를 쉽게 다운로드할 수도 있습니다.

이 글은 주로 webpack을 처음 접하는 학생들을 대상으로 하며 초기 설정 및 구성, 모듈, 로더, 플러그인, 코드 분할 및 핫 모듈 교체를 소개합니다.

다음 내용을 계속 공부하기 전에 Node.js가 컴퓨터에 설치되어 있는지 확인해야 합니다.

초기 구성

npm을 사용하여 새 프로젝트를 초기화하고 웹팩을 설치하세요.

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack@beta --save-dev
mkdir src
touch index.html src/app.js webpack.config.js

다음 파일을 작성하세요.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
 </head>
 <body>
  <p id="root"></p>
  <script src="dist/bundle.js"></script>
 </body>
</html>

// src/app.js
const root = document.querySelector(&#39;#root&#39;)
root.innerHTML = `<p>Hello webpack.</p>`

// webpack.config.js
const webpack = require(&#39;webpack&#39;)
const path = require(&#39;path&#39;)

const config = {
 context: path.resolve(__dirname, &#39;src&#39;),
 entry: &#39;./app.js&#39;,
 output: {
  path: path.resolve(__dirname, &#39;dist&#39;),
  filename: &#39;bundle.js&#39;
 },
 module: {
  rules: [{
   test: /\.js$/,
   include: path.resolve(__dirname, &#39;src&#39;),
   use: [{
    loader: &#39;babel-loader&#39;,
    options: {
     presets: [
      [&#39;es2015&#39;, { modules: false }]
     ]
    }
   }]
  }]
 }
}

module.exports = config

위 구성은 일반적인 시작점은 webpack에 항목 파일 src/app.js를 컴파일하여 /dist/bundle.js 파일로 출력하고 babel을 사용하여 모든 항목을 컴파일하도록 지시하는 것입니다. .js 파일은 ES2015에서 ES5로 변환됩니다. src/app.js编译输出到文件/dist/bundle.js中、使用babel将所有的.js文件从ES2015转换成ES5。

为了让它可以转换到ES5格式的JS文件，我们需要安装三个包：babel-core、webpack加载器babel-loader和预置babel-preset-es2015。使用{ modules: false }让Tree Shaking 从打包文件中删除未使用的导出项（exports）以减少文件大小。

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

最后，用以下内容替换package.json的scripts部分：

"scripts": {
 "start": "webpack --watch",
 "build": "webpack -p"
},

在命令行中运行npm start将以监视模式启动webpack，当src目录中的.js文件更改时，它将重新编译bundle.js。控制台中的输出展示了打包文件的信息，注意打包文件的数量和大小十分重要。

现在当你在浏览器中加载index.html页面时会看到"Hello webpack."。

open index.html

打开dist/bundle.js文件看看webpack都做了哪些事情，顶部是webpack的模块引导代码，底部是我们的模块。到目前为止，你可能对于这个还没有一个深刻的印象。但是现在你可以开始编写ES6模块，webpack将生成适用于所有浏览器的打包文件。

使用Ctrl + C停止webpack，运行npm run build以生产模式编译我们的bundle.js。

注意，打包文件的大小从2.61 kB减少到了585字节。再看一下dist/bundle.js文件，你会看到大量难懂的代码，因为我们使用UglifyJS压缩了它。这样的话，我们可以使用更少的代码达到与之前一样的效果。

模块

优秀的webpack知道如何使用各种格式的JavaScript模块，最著名的两个是：

ES2015 import语句
CommonJS require()语句

我们可以通过安装、导入lodash来测试这些格式的模块。

npm install lodash --save

// src/app.js
import {groupBy} from &#39;lodash/collection&#39;

const people = [{
 manager: &#39;Jen&#39;,
 name: &#39;Bob&#39;
}, {
 manager: &#39;Jen&#39;,
 name: &#39;Sue&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Shirley&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Terrence&#39;
}]
const managerGroups = groupBy(people, &#39;manager&#39;)

const root = document.querySelector(&#39;#root&#39;)
root.innerHTML = `<pre class="brush:php;toolbar:false">${JSON.stringify(managerGroups, null, 2)}

运行npm start启动webpack并刷新index.html，你可以看到一个根据manager分组的数组。

让我们将这个数组转移到它自己的模块people.js中。

// src/people.js
const people = [{
 manager: &#39;Jen&#39;,
 name: &#39;Bob&#39;
}, {
 manager: &#39;Jen&#39;,
 name: &#39;Sue&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Shirley&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Terrence&#39;
}]

export default people

我们可以在app.js中使用相对路径轻松的导入它。

// src/app.js
import {groupBy} from &#39;lodash/collection&#39;
import people from &#39;./people&#39;

const managerGroups = groupBy(people, &#39;manager&#39;)

const root = document.querySelector(&#39;#root&#39;)
root.innerHTML = `<pre class="brush:php;toolbar:false">${JSON.stringify(managerGroups, null, 2)}

注意：像lodash/collection这样没有相对路径的导入是导入安装在/node_modules的模块，你自己的模块需要一个类似./people的相对路径，你可以以此区分它们。

加载器

我们已经介绍过，你可以通过配置像babel-loader这样的加载器来告诉webpack在遇到不同文件类型的导入时该怎么做。你可以将多个加载器组合在一起，应用到很多文件转换中。在JS中导入.sass文件是一个非常的例子。

Sass

这种转换涉及三个单独的加载器和node-sass库：

npm install css-loader style-loader sass-loader node-sass --save-dev

在配置文件中为.scss文件添加新规则。

// webpack.config.js
rules: [{
 test: /\.scss$/,
 use: [
  &#39;style-loader&#39;,
  &#39;css-loader&#39;,
  &#39;sass-loader&#39;
 ]
}, {
 // ...
}]

注意：任何时候更改webpack.config.js中的任意一个加载规则都需要使用Ctrl + C和npm start

ES5 형식의 JS 파일로 변환하려면 babel-core, 웹팩 로더 babel-loader 및 사전 설정 babel- 의 세 가지 패키지를 설치해야 합니다. 프리셋-es2015. Tree Shaking이 패키지 파일에서 사용하지 않는 내보내기를 제거하여 파일 크기를 줄이려면 {modules: false }를 사용하세요.

rrreee
마지막으로 package.json의 scripts 섹션을 다음으로 바꿉니다. 🎜🎜🎜🎜🎜rrreee🎜 명령줄에서 npm start를 실행하면 src 디렉터리의 .js 파일이 감시 모드에서 webpack이 시작됩니다. 변경하면 Bundle.js가 다시 컴파일됩니다. 콘솔의 출력에는 패키지된 파일의 정보가 표시됩니다. 패키지된 파일의 수와 크기에 주의하는 것이 중요합니다. 🎜
🎜🎜이제 브라우저에서 index.html 페이지를 로드하면 "Hello webpack."이 표시됩니다. 🎜🎜index.html 열기🎜🎜 dist/bundle.js 파일을 열어 webpack이 수행한 작업을 확인하세요. 상단은 webpack의 모듈 부팅 코드이고 하단은 우리 모듈입니다. 지금까지는 이에 대해 깊은 인상을 받지 못했을 수도 있습니다. 하지만 이제 ES6 모듈 작성을 시작할 수 있으며 webpack은 모든 브라우저에서 작동하는 번들 파일을 생성합니다. 🎜🎜 Ctrl + C를 사용하여 webpack을 중지하고 npm run build를 실행하여 프로덕션 모드에서 bundle.js를 컴파일하세요. 🎜🎜패킹된 파일의 크기가 2.61KB에서 585바이트로 줄었습니다. dist/bundle.js 파일을 다시 살펴보면 UglifyJS를 사용하여 축소했기 때문에 읽을 수 없는 코드가 많이 표시됩니다. 이렇게 하면 더 적은 코드를 사용하여 이전과 동일한 효과를 얻을 수 있습니다. 🎜🎜🎜모듈🎜🎜🎜훌륭한 웹패커는 JavaScript 모듈을 다양한 형식으로 사용하는 방법을 알고 있으며, 가장 유명한 두 가지 모듈은 다음과 같습니다: 🎜🎜🎜🎜ES2015 import 문🎜

🎜lodash를 설치하고 가져와서 이러한 형식의 모듈을 테스트할 수 있습니다. 🎜🎜🎜🎜🎜rrreee🎜🎜🎜rrreee🎜 npm start를 실행하여 webpack을 시작하고 index.html을 새로 고치면 관리자별로 그룹화된 배열을 볼 수 있습니다. 🎜🎜이 배열을 자체 모듈 people.js로 옮겨 보겠습니다. 🎜🎜🎜🎜🎜rrreee🎜 app.js에서 상대 경로를 사용하여 쉽게 가져올 수 있습니다. 🎜🎜🎜🎜🎜rrreee🎜참고: lodash/collection과 같은 상대 경로가 없는 가져오기는 /node_modules에 설치된 모듈을 가져오는 것과 같습니다. 코드>./사람의 경로를 사용하여 구분할 수 있습니다. 🎜🎜🎜Loaders🎜🎜🎜우리는 이미 babel-loader와 같은 로더를 구성하여 다양한 파일 유형을 가져올 때 웹팩에 무엇을 해야 할지 알릴 수 있다는 점을 소개했습니다. 여러 로더를 함께 결합하여 여러 파일 변환에 적용할 수 있습니다. JS에서 .sass 파일을 가져오는 것이 아주 좋은 예입니다. 🎜🎜🎜Sass🎜🎜🎜이 변환에는 세 개의 개별 로더와 node-sass 라이브러리가 포함됩니다. 🎜🎜🎜🎜🎜rrreee🎜구성 파일에 .scss 파일에 대한 새 규칙을 추가하세요. 🎜🎜🎜🎜🎜rrreee🎜참고: webpack.config.js에서 로딩 규칙을 변경할 때마다 Ctrl + C 및

npm start를 사용해야 합니다. 빌드를 다시 시작합니다. 🎜🎜로더 시퀀스는 역순으로 처리됩니다. 🎜🎜🎜🎜sass-loader Sass를 CSS로 변환합니다. 🎜<li><p>css-loader CSS를 JavaScript로 구문 분석하고 모든 종속성을 해결합니다. </p></li>
<li><p>style-loader는 CSS를 문서에 출력합니다. </p></li>

위 내용은 webpack2 및 모듈 패키징 관련 문제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Web Speech API开发者指南：它是什么以及如何工作Apr 11, 2023 pm 07:22 PM

译者 | 李睿审校 | 孙淑娟Web Speech API是一种Web技术，允许用户将语音数据合并到应用程序中。它可以通过浏览器将语音转换为文本，反之亦然。Web Speech API于2012年由W3C社区引入。而在十年之后，这个API仍在开发中，这是因为浏览器兼容性有限。该API既支持短时输入片段，例如一个口头命令，也支持长时连续的输入。广泛的听写能力使它非常适合与Applause应用程序集成，而简短的输入很适合语言翻译。语音识别对可访问性产生了巨大的影响。残疾用户可以使用语音更轻松地浏览

如何使用Docker部署Java Web应用程序Apr 25, 2023 pm 08:28 PM

docker部署javaweb系统1.在root目录下创建一个路径test/appmkdirtest&&cdtest&&mkdirapp&&cdapp2.将apache-tomcat-7.0.29.tar.gz及jdk-7u25-linux-x64.tar.gz拷贝到app目录下3.解压两个tar.gz文件tar-zxvfapache-tomcat-7.0.29.tar.gztar-zxvfjdk-7u25-linux-x64.tar.gz4.对解

web端是什么意思Apr 17, 2019 pm 04:01 PM

web端指的是电脑端的网页版。在网页设计中我们称web为网页，它表现为三种形式，分别是超文本（hypertext）、超媒体（hypermedia）和超文本传输协议（HTTP）。

web前端和后端开发有什么区别Jan 29, 2023 am 10:27 AM

区别：1、前端指的是用户可见的界面，后端是指用户看不见的东西，考虑的是底层业务逻辑的实现，平台的稳定性与性能等。2、前端开发用到的技术包括html5、css3、js、jquery、Bootstrap、Node.js、Vue等；而后端开发用到的是java、php、Http协议等服务器技术。3、从应用范围来看，前端开发不仅被常人所知，且应用场景也要比后端广泛的太多太多。

Python轻量级Web框架：Bottle库！Apr 13, 2023 pm 02:10 PM

和它本身的轻便一样，Bottle库的使用也十分简单。相信在看到本文前，读者对python也已经有了简单的了解。那么究竟何种神秘的操作，才能用百行代码完成一个服务器的功能？让我们拭目以待。1. Bottle库安装1）使用pip安装2）下载Bottle文件https://github.com/bottlepy/bottle/blob/master/bottle.py2.“HelloWorld！”所谓万事功成先HelloWorld，从这个简单的示例中，了解Bottle的基本机制。先上代码：首先我们从b

web前端打包工具有哪些Aug 23, 2022 pm 05:31 PM

web前端打包工具有：1、Webpack，是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序；2、Grunt，一个前端打包构建工具；3、Gulp，用代码方式来写打包脚本；4、Rollup，ES6模块化打包工具；5、Parcel，一款速度极快、零配置的web应用程序打包器；6、equireJS，是一个JS文件和模块加载器。

web是前端还是后端Aug 24, 2022 pm 04:10 PM

web有前端，也有后端。web前端也被称为“客户端”，是关于用户可以看到和体验的网站的视觉方面，即用户所看到的一切Web浏览器展示的内容，涉及用户可以看到，触摸和体验的一切。web后端也称为“服务器端”，是用户在浏览器中无法查看和交互的所有内容，web后端负责存储和组织数据，并确保web前端的所有内容都能正常工作。web后端与前端通信，发送和接收信息以显示为网页。