모듈 바인딩기는 무엇입니까?웹 패키지는 어떻게 구성합니까?
12597 단어 webdevreactjavascriptwebpack
How can we take advantage of Module Bundlers to build large scale applications.
우선 모듈 귀속기를 언제 사용할 수 있는지, 왜 사용할 수 있는지 알아보자.
Def: - 모듈 바인딩기를 사용하여 JavaScript 파일, 이미지, 스타일 및 글꼴을 단일 폴더에 바인딩할 수 있습니다.
이 환매 프로토콜을 복제하고 새 지점에 코드를 작성합니다.
감동적인 선율 / 패키지 템플릿
패키지 템플릿
이 리포를 만드는 것은 패키지와 dev에 발표된 글을 설명하기 위해서입니다. 여기에서 읽으십시오 ->
View on GitHub
🌼
우리가 웹 개발 분야의 초보자일 때, 우리는 다음과 같은 세 가지 기본적인 것을 사용한다. 그것이 바로 HTML, CSS, JS이다.그러나 우리가 그것을 깊이 연구할 때, 우리는 TypeScript로 JS를 대체하고, ReactJs와 같은 라이브러리로 HTML을 대체하며, Sass로 CS를 대체할 수 있다.
상기 내용 외에 우리는 Firebase, npm 패키지, D3 Js 등의 내용을 주입할 수 있다. 많은 주입 의존항은 통용되는 Js을 사용할 수 있는데 이것은 현대의 es 문법과 호환되지 않는다.우리가 얻은 잘못은 -Uncaught Reference Error : require is not defined이다.일부 오래된 브라우저는 새로운 Js 문법을 이해할 수 없습니다.
따라서, 설령 우리가 이 물건들을 관리하기 위해 노력한다고 해도, 우리는 결국 거대한 JS 파일을 얻게 될 것이다. 그리고 그것을 축소하고 더 작은 파일로 분해해서 불러오는 시간을 줄여야 한다.
따라서 상술한 모든 문제를 해결하기 위해 Webpack,parcel,rollup,snowpack 등 모듈 패키지가 발생하여 과정이 간단하고 오류가 없도록 했다.
자, 이제 왜 이런 것들을 도입해야 하는지 알겠지만, 그들이 하는 기본적인 작업은 여러 개의 JS 파일을 하나의 큰 파일로 통합하는 것이다.나중에 브라우저에 프로그램을 불러올 수 있습니다.
됐어, 이론은 충분해!우리🛠️ Webpack을 처음부터 구성하고 코드를 작성합니다(> 참조).◠)✌
🌻 Webpack을 구성하려면 다음 절차를 따르십시오.
1. 항목 자바스크립트 파일 만들기
색인을 만듭니다.js는 src 폴더에 있습니다.이 src/index.js은 모든 것이 여기서부터 시작되기 때문에 항목 문서가 될 것이다.
// src/index.js
console.log(
"lets use lodash package to convert this plain text to kebab-case text"
);
현재 public/index.html 파일을 만들고 index.js 파일을 가져옵니다.
폴더 구조👇🏻
index.html<!-- public/index.html -->
<head>
<meta charset="UTF-8">
<title>Configure Webpack</title>
<script src="../src/index.js"></script>
</head>
<body>
<p>and some text here</p>
</body>
html 파일을 열면 콘솔을 볼 수 있습니다.
2.lodash npm 패키지 설치
lodash 패키지를 설치하기 전에 먼저 명령 package.json을 사용하여 프로젝트 폴더에 npm init -y 파일을 만듭니다.
🌻
현재 명령 lodash을 사용하여 npm i lodash을 설치합니다.
현재lodash에서 의존항을 가져옵니다.일반 문자열을 불고기 꼬치로 바꾸는 kebabCase을 가져옵니다.
// src/index.js
import { kebabCase } from "lodash";
console.log(
kebabCase("lets use lodash package to convert this plain text to kebab-case text")
);
브라우저의 리셋 단추를 누르면 다음 오류가 발생합니다.
이것이 바로 웹 패키지가 상술한 오류를 구하고 해결하는 곳이다.
3. 기본 웹 패키지 설치 및 구성
따라서 이러한 오류를 해결하기 위해서는 웹팩, Parcel 같은 패키지를 사용해야 합니다.웹 패키지를 사용하여 상술한 오류를 제거하는 방법을 보여 줍니다.다음 명령을 사용하여 설치합니다npm install --save-dev webpack webpack-cli .
설치 후 웹 패키지는 package.json 파일의build 명령을 변경할 수 있습니다.Build 명령에는 webpack만 호출됩니다.
{
.
.
.
"scripts": {
"build": "webpack"
},
.
.
.
🙌🏻 이제 명령줄에서build 명령 npm run build을 실행합니다.그것은 지수를 분석할 것이다.js 코드를 dist/main.js 파일로 컴파일합니다.그래서 그 메인 파이프로js 파일은 html 파일의 스크립트 표시를 <script src="../dist/main.js"></script>으로 변경해야 합니다.
현재 브라우저의 오류가 사라져야 합니다. 컨트롤러 출력은 다음과 같습니다.
🎉 이렇게 해서 우리는 막 기본 웹 페이지의 설정을 완성했다.
4. 패키지 구성 사용자 정의
지금까지 기본 웹 설정을 사용했습니다.기본 설정은 src/index를 찾을 것입니다.기본적으로 js 파일입니다.그래서 파일 이름이 색인이 아니라면일은 성공하지 못할 것이다.
따라서 우리만의 설정을 설계하기 위해서는 파일이 필요합니다.루트 디렉토리에 webpack.config.js 파일을 생성합니다.그리고 너는 Webpack의 행동을 맞춤형으로 설정할 수 있다.
const path = require("path");
module.exports = {
// define your entry point here
entry: "./src/index.js",
output: {
filename: "otherThanMain.js",
path: path.resolve(__dirname, "dist"),
}
};
build 명령을 다시 실행하면 dist 폴더에 otherThanMain.js을 생성합니다.설정 파일의 출력 파일 이름을 변경했기 때문입니다.
5. Sass 로더 추가
그러나 대형 프로젝트를 건설할 때도 우리는 Sass을 사용할 수 있다.따라서 src 폴더에 style.scss 파일을 만들고sass 코드를 작성한 다음 색인에 가져옵니다.js 파일.
import "./style.scss";
import { kebabCase } from "lodash";
console.log(kebabCase("lets use lodash package to convert this plain text to kebab-case text"));
js 파일에서sass 파일을 가져오고 있기 때문에 모든 것이 작동하지 않습니다.따라서 이러한 작업을 제대로 수행하려면 SASS Loader*를 설치해야 합니다.로드 프로그램을 사용하여 Javascript 파일이 아닌 파일을 처리할 수 있습니다.
명령 npm i --save-dev css-loader style-loader sass-loader을 실행합니다.설치 후 웹팩 구성 파일을 다음과 같이 수정합니다.
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "awesome.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
};
이제build 명령을 다시 실행하면 모든 것이 좋아질 것입니다.
모듈 바인딩 및 웹 패키지 here에 대한 자세한 내용을 보십시오.
내 트위터 관리자-
튜토리얼 비디오.
여기서 파일 액세스 -
감동적인 선율
/
패키지 템플릿
패키지 템플릿
이 리포를 만드는 것은 패키지와 dev에 발표된 글을 설명하기 위해서입니다. 여기에서 읽으십시오 ->
View on GitHub
Reference
이 문제에 관하여(모듈 바인딩기는 무엇입니까?웹 패키지는 어떻게 구성합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/movingmelody/what-are-module-bundlers-how-to-configure-webpack-75h
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// src/index.js
console.log(
"lets use lodash package to convert this plain text to kebab-case text"
);
<!-- public/index.html -->
<head>
<meta charset="UTF-8">
<title>Configure Webpack</title>
<script src="../src/index.js"></script>
</head>
<body>
<p>and some text here</p>
</body>
// src/index.js
import { kebabCase } from "lodash";
console.log(
kebabCase("lets use lodash package to convert this plain text to kebab-case text")
);
{
.
.
.
"scripts": {
"build": "webpack"
},
.
.
.
const path = require("path");
module.exports = {
// define your entry point here
entry: "./src/index.js",
output: {
filename: "otherThanMain.js",
path: path.resolve(__dirname, "dist"),
}
};
import "./style.scss";
import { kebabCase } from "lodash";
console.log(kebabCase("lets use lodash package to convert this plain text to kebab-case text"));
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "awesome.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
};
이 리포를 만드는 것은 패키지와 dev에 발표된 글을 설명하기 위해서입니다. 여기에서 읽으십시오 ->
View on GitHub
Reference
이 문제에 관하여(모듈 바인딩기는 무엇입니까?웹 패키지는 어떻게 구성합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/movingmelody/what-are-module-bundlers-how-to-configure-webpack-75h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
