웹팩이란 무엇입니까? 작동 원리에 대한 자세한 설명?
Webpack 소개
Webpack은 모듈 패키징 도구입니다. 다양한 종속성을 위한 모듈을 생성하고 이를 모두 관리 가능한 출력 파일로 패키지합니다. 이는 단일 페이지 애플리케이션(현재 웹 애플리케이션의 사실상 표준)에 특히 유용합니다.
두 가지 간단한 수학 작업(덧셈과 곱셈)을 수행할 수 있는 애플리케이션이 있다고 가정해 보겠습니다. 유지 관리를 쉽게 하기 위해 이러한 기능을 여러 파일로 분할하기로 결정했습니다.
index.html
<html>
<head>
<script src="src/sum.js"></script>
<script src="src/multiply.js"></script>
<script src="src/index.js"></script>
</head>
</html>index.js
var totalMultiply = multiply(5, 3); var totalSum = sum(5, 3); console.log('Product of 5 and 3 = ' + totalMultiply); console.log('Sum of 5 and 3 = ' + totalSum);
multiply.js
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};sum.js
var sum = function (a, b) {
return a + b;
};이 애플리케이션의 출력은 다음과 같아야 합니다.
Product of 5 and 3 = 15 Sum of 5 and 3 = 8
Webpack이 우리를 돕는 방법 ?
도구가 우리에게 어떤 도움을 줄 수 있는지 알지 못한 채 도구만 사용할 수는 없습니다. 그렇다면 Webpack은 우리에게 무엇을 해줬나요?
모듈을 사용하여 종속성 복구
위 코드에서 multiply.js 및 index.js는 모두 sum.js에 의존한다는 것을 알 수 있습니다. 따라서 index.html이 종속성을 잘못된 순서로 가져오면 애플리케이션이 작동하지 않습니다. 예를 들어 index.js를 먼저 가져오거나 multiply.js 다음에 sum.js를 가져오면 오류가 발생합니다.
위의 예를 바탕으로 실제 웹 애플리케이션에는 종종 수십 개의 종속성이 포함될 수 있다고 가정해 보겠습니다. 이러한 종속성 간의 순서를 유지하는 것이 좋습니다. 또한 다른 종속성이 변수를 덮어쓰게 되어 버그를 찾기 어려울 위험이 있을 수도 있습니다.
이 문제점을 해결하기 위해 Webpack은 종속성을 더 작은 범위의 모듈로 변환하여 변수를 덮어쓰는 것을 방지합니다. 종속성을 모듈로 변환하면 Webpack이 이러한 종속성을 관리할 수 있다는 또 다른 이점이 있습니다. 구체적인 방법은 Webpack이 필요할 때 종속 모듈을 도입하고 해당 범위를 일치시키는 것입니다.
패키징을 통해 HTTP 요청 수 줄이기
index.html을 다시 살펴보겠습니다. 이 파일에서는 세 개의 독립적인 파일을 다운로드해야 합니다. 물론 여기에 있는 파일은 상대적으로 작아서 처리할 수 있지만 앞서 언급한 문제는 여전히 존재합니다. 실제 웹 애플리케이션에는 많은 종속성이 있을 수 있으며 이로 인해 사용자는 모든 종속성이 완료될 때까지 기다려야 합니다. 기본 애플리케이션을 실행하기 전에 하나씩 다운로드해야 합니다.
그리고 이는 Webpack의 또 다른 기능인 패키징으로 이어집니다. Webpack은 모든 종속성을 하나의 파일로 패키징할 수 있습니다. 즉, 사용자는 하나의 종속성만 다운로드하면 기본 애플리케이션을 실행할 수 있습니다.
결론적으로 Webpack의 주요 기능은 패키징과 모듈화입니다. 플러그인과 로더를 사용하면 Webpack의 두 가지 기능을 확장할 수 있습니다.
종속성을 사용 가능하게 만들고 결합합니다
우리는 CommonJS 모듈 구문을 초기 설정으로 사용할 것입니다. 물론 AMD, ES2015 등 다른 옵션도 있지만 여기서는 CommonJS를 먼저 사용하고 나중에 ES2015로 마이그레이션하겠습니다.
CommonJS는 다른 코드가 내보낸 모듈의 함수나 변수를 사용할 수 있도록 모듈을 내보냅니다. require를 통해 내보낸 모듈의 값을 읽을 수 있습니다. ㅋㅋㅋ sum 함수와 multiply 함수를 사용할 수 있습니다. require将导出模块中的值读出来。
index.html
<html>
<head>
<script src="./dist/bundle.js""></script>
</head>
</html>index.js
var multiply = require('./multiply');
var sum = require('./sum');
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);multiply.js
var sum = require('./sum');
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
module.exports = multiply;sum.js
var sum = function (a, b) {
return a + b;
};
module.exports = sum;观察上面的代码，不难发现，为了让函数sum与函数multiplysum.js 및 multiply.js 스크립트에서 이 두 함수를 내보냈습니다. 여기에 세부 사항이 있는데, 눈치채셨는지 모르겠습니다. index.html에서 이제 하나의 bundle.js 파일만 가져오면 됩니다.
Webpack 초기 구성
위에서 달성하려는 효과를 얻으려면 Webpack의 몇 가지 초기 구성을 수행해야 합니다.var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
}
}entry: 这个属性表示应用的入口。入口就意味着，这是我们加载程序和程序逻辑的起点。Webpack将从这个入口开始，遍历整棵依赖树。根据遍历结果建立一个依赖间关系图，并创建需要的模块。output.path: 这个属性表示存放打包结果的绝对路径。这里为了方便使用，我们采用了Node.js自带的函数path，这个函数能够根据我们程序所处的位置，动态的创建绝对路径。其中，__dirname是Node.js的一个工具变量，它表示当前文件的目录名。output.filename: 这个属性表示打包结果的文件名。它的名字可以是任意的，只不过我们习惯叫它bundle.js。
来看看bundle.js
阅读生成的bundle.js代码，可以给我们带来一些启发。
// the webpack bootstrap
(function (modules) {
// The module cache
var installedModules = {};
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
// Create a new module (and put it into the cache)
// Execute the module function
// Flag the module as loaded
// Return the exports of the module
}
// expose the modules object (__webpack_modules__)
// expose the module cache
// Load entry module and return exports
return __webpack_require__(0);
})
/************************************************************************/
([
// index.js - our application logic
/* 0 */
function (module, exports, __webpack_require__) {
var multiply = __webpack_require__(1);
var sum = __webpack_require__(2);
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);
},
// multiply.js
/* 1 */
function (module, exports, __webpack_require__) {
var sum = __webpack_require__(2);
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
module.exports = multiply;
},
// sum.js
/* 2 */
function (module, exports) {
var sum = function (a, b) {
return a + b;
};
module.exports = sum;
}
]);从上面的代码可以看出，Webpack把每一个js脚本都封装到一个模块中，并把这些模块放进数组中。模块数组被传入Webpack的引导程序中，引导程序会把这些模块加入Webpack并执行，使得模块可用。
这里bundle.js返回的是__webpack_require__(0)，而这刚好对应了模块数组中的index.js部分。基于此我们同样可以得到正确的运行结果，而不需要处理依赖管理，下载依赖的次数也仅需要一次。
Loader让Webpack更好用
Webpack仅能理解最基本的JavaScript ES5代码，它自身仅支持创建模块并打包JavaScript ES5。如果我们不仅仅局限于JavaScript ES5，例如我们想使用ES2015，这就需要告诉Webpack如何处理ES2015。这里我们的处理方式往往是，我们需要将其它语言（如TypeScript）或其它版本（如ES2015）预处理成JavaScript ES5，再让Webpack做打包。这里就需要使用Babel来做转换，把ES2015转换为ES5（当然Babel能做的事情远不止如此）。
为了说明这个过程，我们使用ES2015重写之前的功能。
index.js
import multiply from './multiply';
import sum from './sum';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
console.log(`Product of 5 and 3 = ${totalMultiply}`);
console.log(`Sum of 5 and 3 = ${totalSum}`);multiply.js
import sum from './sum';
const multiply = (a, b) => {
let total = 0;
for(let i=0;i<b;i++) {
total = sum(a, total);
}
return total;
};
export default multiply;sum.js
const sum = (a, b) => a + b; export default sum;
这里我们使用了很多ES2015的新特性，例如箭头函数、const关键字、模板字符串和ES2015的导入导出。ES2015的代码Webpack无法处理，所以我们需要Babel来进行转换。想要让Babel配合Webpack完成工作，我们就需要用到Babel Loader。事实上，Loader就是Webpack处理JavaScript ES5以外内容的方式。有了加载器，我们就可以让Webpack处理各式各样的文件。
想要在Webpack中使用Babel Loader，我们还需要三个Babel依赖：
babel-loader: 提供Babel与Webpack之间的接口；babel-core: 提供读取和解析代码的功能，并生成对应的输出；babel-preset-es2015: 提供将ES2015转换为ES5的Babel规则；
在Webpack中配置Babel Loader的代码，差不多是下面这样子：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
}
};这段代码你可以在webpack.config.js中找到。值得注意的是，Webpack中是支持同时存在多个Loader的，所以提供的值是一个数组。接着，还是让我们来看看每个属性代表的含义。
test: 我们只希望Loader处理JavaScript文件，这里通过一个正则表达式匹配.js文件；loader: 要使用的Loader，这里使用了babel-loader；exclude: 哪些文件不需要被处理，这里我们不希望Babel处理node_modules下的任何文件；query.presets: 我们需要使用哪个规则，这里我们使用Babel转换ES2015的规则；
配置好这些内容后，再次查看打包生成的bundle.js，其中的内容看起来就像下面这样：
/* 2 */
function(module, exports) {
var sum = function sum(a, b) {
return a + b;
};
module.exports = sum;
}可以看到，Babel Loader已经把ES2015的代码变成了ES5的代码。
CSS与样式，让Webpack看起来更出色
接下来，让我们拓展上面的例子，输出计算结果。我们将在页面上创建一个body，然后把乘积与加和的结果添加到span中。
import multiply from './multiply';
import sum from './sum';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
// create the body
const body = document.createElement("body");
document.documentElement.appendChild(body);
// calculate the product and add it to a span
const multiplyResultsSpan = document.createElement('span');
multiplyResultsSpan.appendChild(document.createTextNode(`Product of 5 and 3 = ${totalMultiply}`));
// calculate the sum and add it to a span
const sumResultSpan = document.createElement('span');
sumResultSpan.appendChild(document.createTextNode(`Sum of 5 and 3 = ${totalSum}`));
// add the results to the page
document.body.appendChild(multiplyResultsSpan);
document.body.appendChild(sumResultSpan);这段代码的输出结果，应该与之前是一致的，区别仅在于显示在页面上。
Product of 5 and 3 = 15 Sum of 5 and 3 = 8
我们可以使用CSS来美化这个结果，比如，我们可以让每个结果都独占一行，并且给每个结果都加上边框。为了实现这一点，我们可以使用如下的CSS代码。
span {
border: 5px solid brown;
display: block;
}我们需要将这个CSS也导入应用中。这里最简单的解决方案是，在我们的html中添加一个link标签。但有了Webpack提供的强大功能，我们可以先导入它，再用Webpack来处理这个样式。
在代码中导入CSS带来的另一个好处是，开发者可以清晰的看到CSS与其使用之间的关联。这里需要注意的是，CSS的作用域并不局限于它所导入的模块本身，其作用域仍然是全局的，但从开发者的角度看，这样使用更加清晰。
import multiply from './multiply';
import sum from './sum';
// import the CSS we want to use here
import './math_output.css';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
// create the body
const body = document.createElement("body");
document.documentElement.appendChild(body);
// calculate the product and add it to a span
const multiplyResultsSpan = document.createElement('span');
multiplyResultsSpan.appendChild(document.createTextNode(`Product of 5 and 3 = ${totalMultiply}`));
// calculate the sum and add it to a span
const sumResultSpan = document.createElement('span');
sumResultSpan.appendChild(document.createTextNode(`Sum of 5 and 3 = ${totalSum}`));
// add the results to the page
document.body.appendChild(multiplyResultsSpan);
document.body.appendChild(sumResultSpan);这段代码中，与前面代码的唯一区别在于，我们导入了CSS。我们需要两个Loader来处理我们的CSS：
css-loader: 用于处理CSS导入，具体来说，获取导入的CSS并加载CSS文件内容；style-loader: 获取CSS数据，并添加它们到HTML文档中；
现在我们在webpack.config.js中的Webpack配置看起来像这样：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
};我们还是来看看新增的CSS配置属性所表示的内容。
test: 我们需要告诉Loader，我们只需要它处理CSS文件。这里的正则表达式仅匹配CSS文件。loaders: 这里与前面不同的是，我们使用了多个Loader。还有一个需要注意的细节是，Webpack从右向左处理loader，因此css-loader处理的结果（读出CSS文件内容）会被传递给style-loader，最终得到的是style-loader的处理结果（将样式添加到HTML文档中）。
假如我们现在需要提取CSS，并输出到一个文件中，再导入该文件。为了实现这一点，我们就要用到Plugin。Loader的作用在于，在数据被打包输出前进行预处理。而Plugin则可以阻止预处理的内容直接出现在我们的打包结果中。
我们的Webpack配置现在变成了这样：
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract('css-loader')
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
]
};在这段代码的顶部，我们导入了ExtractTextPlugin，并使用这个插件改造了之前的CSS Loader。这里的作用是，css-loader的处理结果不再直接返回给Webpack，而是传递给ExtractTextPlugin。在底部我们配置了这个Plugin。
这里配置的作用是，对于传递给ExtractTextPlugin的CSS样式数据，将会被保存在名为style.css的文件中。这样做的好处与之前处理JavaScript时一样，我们可以将多个独立的CSS文件合并为一个文件，从而减少加载样式时的下载次数。
最终我们可以直接使用我们合并好的CSS，实现和之前一致的效果。
<html>
<head>
<link rel="stylesheet" href="dist/style.css"/>
<script src="./dist/bundle.js""></script>
</head>
</html>使用Webpack处理图片
现在我们开始尝试向应用中添加图片，并让Webpack来协助我们处理这些图片。这里我们添加了两张图片，一个用于求和，一个用于求积。为了让Webpack有能力处理这些图片，我们使用这两个Loader：
image-webpack-loader: 尝试帮助我们自动压缩图片体积；url-loader: 如果image-webpack-loader的输出图片体积小，就内联使用这些图片，如果image-webpack-loader的输出图片体积大，就将图像包含在输出目录中；
我们准备了两张图片，用于求积的图片（multiply.png）相对较大，用于求和的图片（sum.png）相对较小。首先，我们添加一个图片工具方法，这个方法会为我们创建图片，并将图片添加到文档中。
image_util.js
const addImageToPage = (imageSrc) => {
const image = document.createElement('img');
image.src = imageSrc;
image.style.height = '100px';
image.style.width = '100px';
document.body.appendChild(image);
};
export default addImageToPage;接着，让我们导入这个图片工具方法，以及我们想要添加到index.js中的图片。
import multiply from './multiply';
import sum from './sum';
// import our image utility
import addImageToPage from './image_util';
// import the images we want to use
import multiplyImg from '../images/multiply.png';
import sumImg from '../images/sum.png';
// import the CSS we want to use here
import './math_output.css';
const totalMultiply = multiply(5, 3);
const totalSum = sum(5, 3);
// create the body
const body = document.createElement("body");
document.documentElement.appendChild(body);
// calculate the product and add it to a span
const multiplyResultsSpan = document.createElement('span');
multiplyResultsSpan.appendChild(document.createTextNode(`Product of 5 and 3 = ${totalMultiply}`));
// calculate the sum and add it to a span
const sumResultSpan = document.createElement('span');
sumResultSpan.appendChild(document.createTextNode(`Sum of 5 and 3 = ${totalSum}`));
// add the results to the page
addImageToPage(multiplyImg);
document.body.appendChild(multiplyResultsSpan);
addImageToPage(sumImg);
document.body.appendChild(sumResultSpan);最后，我们还是来修改webpack.config.js，配置两个新的Loader来处理这些图片。
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract('css-loader')
},
{
test: /.png$/,
loaders: [
'url-loader?limit=5000',
'image-webpack-loader'
]
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
]
};还是老规矩，我们来看看新增的参数都表示什么含义。
output.publicPath: 让url-loader知道，保存到磁盘的文件需要添加指定的前缀。例如，我们需要保存一个output_file.png，那么最终保存的路径应该是dist/output_file.png；test: 还是和之前一样，通过正则表达式匹配图像文件，非图像文件不处理；loaders: 这里还是要再强调一下，Webpack从右向左处理loader，因此image-webpack-loader的处理结果将会被传递给url-loader继续处理。
现在我们执行Webpack打包，会得到下面三个东西。
38ba485a2e2306d9ad96d479e36d2e7b.png bundle.js style.css
这里的38ba485a2e2306d9ad96d479e36d2e7b.png实际上就是我们的大图片multiply.png，较小的图片sum.png会被内联到bundle.js中，就像下面这样。
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAMAAAACDyzWAAAC6FBMVEUAuv8AgL...."
这其实相当于
img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAMAAAACDyzWAAAC6FBMVEUAuv8AgL..."
更多编程相关知识，请访问：编程视频！！
위 내용은 웹팩이란 무엇입니까? 작동 원리에 대한 자세한 설명?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7487
15
1377
52
77
11
51
19
19
39
VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드
Jun 15, 2023 pm 06:17 PM
Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치
VITE와 웹팩의 차이점은 무엇입니까
Jan 11, 2023 pm 02:55 PM
차이점: 1. 웹팩 서버의 시작 속도는 Vite의 시작 속도보다 느립니다. Vite는 시작할 때 패키징할 필요가 없고 모듈 종속성을 분석하고 컴파일할 필요가 없으므로 시작 속도가 매우 빠릅니다. 2. Vite 핫 업데이트는 Vite의 HRM 측면에서 webpack보다 빠릅니다. 특정 모듈의 내용이 변경되면 브라우저가 모듈을 다시 요청하게 됩니다. 3. Vite는 esbuild를 사용하여 종속성을 사전 구축하는 반면 webpack은 노드를 기반으로 합니다. 4. Vite의 생태계는 웹팩만큼 좋지 않으며, 로더와 플러그인도 충분히 풍부하지 않습니다.
모듈식 개발에 PHP와 웹팩을 사용하는 방법
May 11, 2023 pm 03:52 PM
웹 개발 기술이 지속적으로 발전하면서 프론트엔드와 백엔드 분리, 모듈화 개발이 보편화된 추세가 되었습니다. PHP는 일반적으로 사용되는 백엔드 언어입니다. 모듈식 개발을 수행할 때 모듈을 관리하고 패키징하려면 몇 가지 도구를 사용해야 합니다. Webpack은 사용하기 매우 쉬운 모듈식 패키징 도구입니다. 이 글에서는 모듈 개발을 위해 PHP와 웹팩을 사용하는 방법을 소개합니다. 1. 모듈형 개발이란 무엇입니까? 모듈형 개발은 프로그램을 서로 다른 독립적인 모듈로 분해하는 것을 의미합니다.
webpack은 es6을 es5 모듈로 어떻게 변환합니까?
Oct 18, 2022 pm 03:48 PM
구성 방법: 1. 가져오기 방법을 사용하여 ES6 코드를 패키지된 js 코드 파일에 넣습니다. 2. npm 도구를 사용하여 babel-loader 도구를 설치합니다. 구문은 "npm install -D babel-loader @babel/core"입니다. @babel/preset-env"; 3. babel 도구의 구성 파일 ".babelrc"를 생성하고 트랜스코딩 규칙을 설정합니다. 4. webpack.config.js 파일에서 패키징 규칙을 구성합니다.
Spring Boot 및 Webpack을 사용하여 프런트엔드 프로젝트 및 플러그인 시스템 구축
Jun 22, 2023 am 09:13 AM
최신 웹 애플리케이션의 복잡성이 계속 증가함에 따라 우수한 프런트엔드 엔지니어링 및 플러그인 시스템을 구축하는 것이 점점 더 중요해지고 있습니다. Spring Boot와 Webpack의 인기로 인해 프런트엔드 프로젝트와 플러그인 시스템을 구축하기 위한 완벽한 조합이 되었습니다. SpringBoot는 최소한의 구성 요구 사항으로 Java 애플리케이션을 생성하는 Java 프레임워크입니다. 개발자가 웹 애플리케이션을 더 빠르고 쉽게 구축하고 배포할 수 있도록 자동 구성과 같은 많은 유용한 기능을 제공합니다. 여
웹팩이란 무엇입니까? 작동 원리에 대한 자세한 설명?
Oct 13, 2022 pm 07:36 PM
Webpack은 모듈 패키징 도구입니다. 다양한 종속성을 위한 모듈을 생성하고 이를 모두 관리 가능한 출력 파일로 패키징합니다. 이는 단일 페이지 애플리케이션(현재 웹 애플리케이션의 사실상 표준)에 특히 유용합니다.
webpack 패키지를 볼 수 있는 파일은 무엇입니까?
Dec 20, 2022 pm 07:44 PM
vue에서 webpack은 js, css, picture, json 및 기타 파일을 브라우저 사용에 적합한 형식으로 패키징할 수 있으며, webpack에서는 js, css, picture, json 및 기타 파일 형식을 모듈로 사용할 수 있습니다. webpack에 포함된 다양한 모듈 리소스를 하나 이상의 패키지로 패키징하여 병합할 수 있으며 패키징 과정에서 이미지 압축, scss를 css로 변환, ES6 구문을 ES5로 변환 등의 리소스 처리가 가능합니다. html 파일 형식으로 인식됩니다.
Vue에 웹팩을 설치하는 방법
Jul 25, 2022 pm 03:27 PM
vue의 Webpack은 노드 패키지 관리자 "npm" 또는 npm 이미지 "cnpm"을 사용하여 설치됩니다. Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 패키징 도구입니다. 사용 시 node.js 구성 요소 지원이 필요합니다. 구문은 "npm install webpack -"입니다. g" 또는 "cnpm install webpack -g".
