왜 게임에 들어가기 전에 웹 페이지를 배워야 합니까?

🌐브라우저에서 JavaScript 실행 방법

브라우저 포함🔥JavaScript 엔진은🎯브라우저의 뇌.

JavaScript가 없으면 브라우저 엔진에서 JavaScript 파일을 읽을 수 없습니다.

따라서 HTML 파일에 많은 스크립트 파일이 포함된 경우 엔진이 원하지 않는 순서대로 파일을 로드할 수 있습니다.

스크립트를 동적으로 불러오지 않거나 지연이나 비동기로 표시하지 않으면 스크립트는 페이지에서 만나는 순서대로 불러옵니다.외부 스크립트든 내부 스크립트든 모두 페이지에서 만나는 순서에 따라 실행됩니다.

스크립트를 설정하는 순서가 불안한 활동일까요?

이 문제를 해결하기 위해서.👋웹 패키지는 쓸모가 있을 수 있다.

✅ 웹 패키지란?

모델 자바스크립트 프로그램 개발을 좋아한다면 웹 패키지라는 단어를 만날 수 있습니다.

Webpack은 모듈 바인딩입니다.

모든 자바스크립트 파일을 묶고 자바스크립트 파일을 생성하는데 주로 생산 구축 파일이라고 부른다.

✅ WEBPACK을 사용해야 하는 이유

따라서 의존항의 순서를 관리하고 싶지 않습니다.

모든 JavaScript 파일을 하나의 큰 JavaScript 파일로 변환합니다.

또한 모든 CSS 파일을 하나의 CSS 파일로 변환합니다.

✅ 웹 패키지의 작업 원리🎰?

가져온 도출 문장을 관찰하고 의존 관계도를 구축합니다.그리고 하나 이상의 버블을 생성하여 생산 구축 폴더로 전송합니다

Webpack은 자산을 가져와 의존 항목으로 전환합니다.

✅ WEBPACK 작동 방식

너는 아래의 이런 개념들을 이해할 필요가 없다.우리는 다음 절에서 이러한 실천을 볼 것이다.그들은 이곳에서 단지 너에게 개술할 뿐이다.
교장
1. 입장
Entry는 응용 프로그램의 엔트리 포인트입니다.이것은 Webpack이 처리하는 첫 번째 모듈(JavaScript 파일)으로 완전한 의존 관계도를 구축하는 데 사용됩니다.
2. 산출
출력점은 파일 이름으로 파일을 디스크에 쓰는 위치입니다
3. 적재기
로드러너는 서로 다른 언어(예: TypeScript)의 파일을 JavaScript로 변환하거나 인라인 이미지를 데이터 URL로 로드할 수 있습니다.
4. 플러그인
플러그인은 로더가 수행할 수 없는 추가 작업을 처리합니다.
5. 모드
모드는 Webpack 응용 프로그램에서 어떤 구성과 최적화를 사용할지 알려줍니다.

✅ 우리 운동장으로 갑시다

노드를 설치해야 합니다.

👍 의존 관계

npm init -y: (노드 항목 초기화)

npm i wepack webpack-cli --save-dev: (이것들은 생산 과정에서 최종적으로 한 페이지의 응용 프로그램으로 바뀌었기 때문에 개발자의 의존 항목으로 설치되어 있다.)

npm i svg-inline-loader --save-dev: (단지 우리의 실천 중의 무작위 SVG 의존항일 뿐이다.)JavaScript에서 SVG 파일을 직접 로드할 수 없으므로 SVG 인라인 로드 모듈을 사용합니다.

npm i --save-dev css-loader: (html 파일에 css를 불러오는 css 마운트기)

npm i --save-dev babel-loader: (이렇게 하면 우리는 현대 자바스크립트를 사용할 수 있다)

npm i --save-dev html-webpack-plugin: (출력 코드를 html에 주입한다)

npm i --save-dev webpack-dev-server: (파일을 저장할 때 빠르게 다시 불러오는 개발 서버)

👍 웹 패키지.배치하다.js

루트 폴더에 파일을 만듭니다webpack.config.js.

다음 코드를 추가합니다

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
     entry: './app/index.js',
     module: {
    rules: [
        {
            test: /\.svg$/,
            use: 'svg-inline-loader',
        },
        {
               test: /\.css$/i,
              use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.(js)$/,
            use: 'babel-loader',
        },
        ],
          },
     output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
     plugins: [new HtmlWebpackPlugin()],
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
};

웹 패키지.배치하다.js 해석

entry :
- 위 코드에서 코드 라이브러리의 입구점을 정의했습니다entry: "./src/index.js",. JavaScript 엔진이 파일에서 코드를 읽기 시작합니다.

modules :

우리는 또 일부 적재기를 정의했다. 예를 들어svg-inline-loader와css-loader-- css 캐리어는 엔진 덮개 아래에서 사용style-loader.rules 몇 가지 규칙을 정의했다test 주어진 확장자를 가진 파일 검색use 확장자가 지정된 파일을 찾을 때 특정 로더를 사용합니다

.

output :

출력 파일의 경로를 정의합니다

.

plugins :
- html-webpack-plugin: index.html 파일을 생성하고 그 위에서 출력 파일을 가져와 주입index.html

mode :
- 코드가 생산 모델에 있어야 하는지 개발 모델에 있어야 하는지를 설명한다.

👍 소포.json

가방에 이 두 스크립트를 추가합니다.json
✔️ macOS 사용자용

  "scripts": {
        "start": "webpack serve",
        "build": "NODE_ENV='production' webpack"
    },

✔️창 사용자용

  "scripts": {
        "start": "webpack serve",
        "build": "SET NODE_ENV='production' & webpack"
    },

"start":"webpack": 웹 패키지

의 노드 모듈에서 검색

"build":"SET NODE_ENV='production' & webpack": 생산에 사용할 dist 폴더를 만듭니다.

👍 색인js

생성app/index.js다음 코드를 추가합니다

const data = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
];

console.log(data);

✅ 결론

스크립트를 실행하면 브라우저에서 프로그램이 실행되는 것을 볼 수 있습니다.

스크립트를 실행하면 웹 패키지 디스플레이 폴더를 볼 수 있습니다. 이것은 저희 생산 버전입니다.

마지막으로 브라우저에서 실행되는 JS 파일은 패키지일 뿐입니다.js.