vanilla JS로 Webpack과 Babel을 설정하는 방법

7733 단어 babel javascript flatiron webpack

(주의: Flatiron 학교에 있는 제 게시물을 Github에서 이 플랫폼으로 옮기고 있습니다. 이 블로그 글은 2020년 4월 29일에 처음 발표됩니다.)
Webpack과 Babel은 매우 유용하지만, 그것들의 설정은 사람들로 하여금 어찌할 바를 모르게 할 수도 있다.솔직히 말하면, 매번 내가 새로운 프로젝트에 그것들을 설정해야 할 때, 나는 낡은 프로젝트를 참고하고, 현재의 수요에 따라 조정할 것이다.제 설정이 잘 될 수 있다는 것을 설명하고 싶습니다. 다른 사람들도 프로젝트를 설정하는 데 도움을 줄 수 있기를 바랍니다.

웹 패키지란?

Webpack은 모듈 바인딩입니다.이것은 필요한 임의의 여러 개의 독립된 파일에서 코드를 작성하고 html 파일을 가져올 수 있도록 출력 파일을 만들 수 있습니다.
당신은 이곳에서 입문 안내서(https://webpack.js.org/guides/getting-started/)를 볼 수 있습니다.

바벨이 뭐야?

Babel은 ECMAScript의 모든 최신 및 최상의 기능을 사용하여 코드를 작성하고 모든 최신 기능이 지원되지 않을 수 있는 이전 환경에서 이전 버전과 호환되는 코드로 변환할 수 있습니다.
사용 설명서 here을 참조하십시오.

내 프로젝트 설정 방법

1단계: 파일 구조

배포 코드를 위한 dist 폴더를 만듭니다.index.html을 이 폴더에 저장하고 src 폴더에 코드를 작성합니다.잠시 후, Webpack이 묶음 파일을 만들 때, 최종적으로 dist 폴더에 있을 것입니다.

project-folder
|_ /dist
    |_ index.html
|_/src
    |_ index.js

2단계: 프로젝트 초기화

// set up your package.json

// using yarn:
yarn init

// using npm:
npm init

project-folder
|_ /dist
|_ /src
|_ package.json

3단계: 웹 패키지 종속성 추가:

// using yarn
yarn add webpack webpack-cli webpack-dev-server --dev

// using npm 
npm install  webpack webpack-cli --save-dev

webpack-dev-server에서 웹 패키지 패키지를 제공할 수 있습니다.저장할 때마다 변경 사항을 다시 포장하고 실시간으로 표시합니다.

4단계: 포장을 뜯는다.json 및 "private" 추가:true로 의외의 코드 발표를 방지합니다.

5단계: 파일 웹 패키지를 만듭니다.배치하다.루트 항목 폴더에서

const path = require('path');
module.exports = {
 "mode": "none",
 "entry": "./src/index.js",
 "output": {
   "path": __dirname + '/dist',
   "filename": "bundle.js"
 },
devServer: {
   contentBase: path.join(__dirname, 'dist')
 }
}

'entry'는 당신의 주 JS 코드 파일이고'path'는 당신의 인덱스가 있는 위치입니다.html 파일은 js 패키지를 원하고'filename'은 js 패키지의 이름입니다.devServer에서는 웹팩 dev 서버에서 dist 폴더를 찾을 수 있습니다.
here 구성에 대한 자세한 내용은 을 참조하십시오.

6단계: 색인을 만듭니다.html 및 색인.js

색인을 만듭니다.<script src="bundle.js"></script>을 <body>의 하단에 추가합니다.
색인을 만듭니다.js는 당신의 src 폴더에 있습니다.테스트에 alert(‘connected!’)과 유사한 내용을 추가합니다.

|_ /dist
    |_ index.html
|_ /src
    |_ index.js
|_ package.json
|_ webpack.config.js

7단계: 패키지에 스크립트를 추가합니다.json

이것은 나의 소포다.지금까지 제이슨은 다음과 같이 보였다.

{
 "name": "webpack_demo",
 "version": "1.0.0",
 "private": true,
 "main": "index.js",
 "license": "MIT",
 "devDependencies": {
   "webpack": "^4.43.0",
   "webpack-cli": "^3.3.11",
   "webpack-dev-server": "^3.10.3"
 },
 "scripts": {
   "build": "webpack",
   "dev-server": "webpack-dev-server"
 }
}

이 스크립트는 코드를 묶을 것입니다.yarn run build을 실행하거나 npm run build을 실행하면 일회성 귀속 코드를 열 수 있습니다.브라우저의 html에서 JavaScript 경고를 볼 수 있습니다.yarn run dev-server 또는 npm run dev-server을 실행하면 로컬 서버가 시작됩니다.일단 시작하고 실행하면 터미널에서 프로젝트를 실행하는 로컬 호스트 (예: http://localhost:8080/) 를 방문하면 자바스크립트 테스트 경보를 볼 수 있습니다.dev 서버를 사용하면 변경, 저장을 할 수 있으며, 자동으로 다시 연결됩니다.인덱스를 수동으로 구축하고 열 염려는 없습니다.매번 변경할 때마다 브라우저에 html이 표시됩니다.

8단계: 스타일 로더 추가

css 파일을 가져오려면 웹 페이지에 해당하는 loaders을 추가해야 합니다.배치하다.js
css-loader은 가져오기를 해석하고 해석하는 데 사용되고 style-loader은 css를 DOM에 주입하는 데 사용됩니다.

// npm install
npm install --save-dev css-loader style-loader

// yarn install
yarn add --dev css-loader style-loader

현재, 로드 프로그램을 사용하기 위해 모듈 규칙을 웹 패키지에 추가합니다.구성 파일.

const path = require('path');

module.exports = {
 "mode": "none",
 "entry": "./src/index.js",
 "output": {
   "path": __dirname + '/dist',
   "filename": "bundle.js"
 },
 devServer: {
   contentBase: path.join(__dirname, 'dist')
 },
 "module": {
   "rules": [
     {
       "test": /\.css$/,
       "use": [
         "style-loader",
         "css-loader"
       ]
     },
   ]
 }
};

'스타일' 이라는 폴더를 만들고 css 파일을 추가합니다.

|_ /dist
    |_ index.html
|_ /src
    |_ index.js
    |_ /styles
        |_ main.css
|_ package.json
|_ webpack.config.js

css 파일에 테스트 코드를 추가하려면 다음과 같이 하십시오.

body {
 background: green;
}

너의 풍격을 너의 색인과 연결시켜라.js 파일:

import './styles/main.css';

현재 dev 서버를 시작할 때 녹색 배경을 볼 수 있습니다.

9단계: 개발 도구

웹 패키지로 코드를 묶을 때, 브라우저의 개발 도구를 사용하려고 하면, 묶인 코드를 모두 볼 수 있고, 코드를 디버깅하기 어려울 것이다.웹 페이지에 devtools을 추가할 수 있습니다.config, 이것은 원본 코드의 생성 방식을 제어합니다. 그러면 당신이 작성한 코드를 볼 수 있고 디버깅도 훨씬 쉽습니다.문서에는 선택할 수 있는 여러 가지 설정이 있지만, 나는 devtool: 'cheap-module-eval-source-map'을 사용한다

10단계: Babel 종속성 설치

// using npm
npm install --save-dev babel-loader @babel/core @babel/preset-env

// using yarn 
yarn add babel-loader @babel/core @babel/preset-env --dev

@babel/preset-env을 사용하기 때문에 다각형 충전이나 환경에 필요한 문법을 걱정할 필요가 없습니다.
바벨 마운트 프로그램을 웹 패키지에 추가합니다.프로비저닝

const path = require('path');

module.exports = {
 "mode": "none",
 "entry": "./src/index.js",
 "output": {
   "path": __dirname + '/dist',
   "filename": "bundle.js"
 },
 devtool: 'cheap-module-eval-source-map',
 devServer: {
   contentBase: path.join(__dirname, 'dist')
 },
 "module": {
   "rules": [
     {
       "test": /\.css$/,
       "use": [
         "style-loader",
         "css-loader"
       ]
     },
     {
       "test": /\.js$/,
       "exclude": /node_modules/,
       "use": {
         "loader": "babel-loader",
         "options": {
           "presets": [
             "@babel/preset-env",
           ]
         }
       }
     },
   ]
 }
};

이게 내 디자인이야.본 논문에 링크된 문서를 보고 설정 항목의 모든 다른 방식을 이해하십시오.

Reference

이 문제에 관하여(vanilla JS로 Webpack과 Babel을 설정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/robotspacefish/how-i-set-up-webpack-and-babel-with-vanilla-js-2k5e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

PAT B1013 수소수

두 가지 이상의 방식으로 하나의 방법이나 대상을 실현하고 호출할 때'안녕xx'를 출력합니다. 정의된 코드는 수정할 수 없고 자신이 컴파일한 것은'안녕하세요'가 나타날 수 없습니까?(Javasctript)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다