Webpack을 사용하여 Javascript 항목을 설정하는 방법

13278 단어 webpackbeginnersjavascript
html 파일에 모든 스크립트를 수동으로 추가하는 것을 멈출 수 있다고 생각해 본 적이 있습니까?
네가 소원을 비는 날이 끝났다!내가 너에게 웹 페이지의 즐거움을 소개해 줄게!
상자를 열면 바로 사용할 수 있는 웹 팩은 html 파일에 스크립트 표시만 허용합니다.그것을 실현하는 방법은 의존 관계도를 만들고 모든 코드를 한데 묶는 것이다.ToDo 응용 프로그램의 종속성 그래프는 다음과 같습니다.

웹팩은 코드를 기어다니며 모든 가져오기와 내보내기 문장을 찾은 다음 실제 사용하는 모든 코드를 한데 모아 하나의 파일에 포장합니다. html 파일에 포함시키기만 하면 됩니다.
우리가 어떤 일을 하기 전에, 너는 반드시 약간의 기초를 다져야 한다.새 폴더에 들어가서 다음과 같은 파일 디렉터리를 설정합니다.그림 파일을 포함하는 폴더가 되려면build와 src가 필요합니다.

이제 루트 디렉터리에 내용을 설정합시다.첫 번째 운행npm init -y.
이것은 패키지를 설정합니다.모든 기본 설정을 포함하는 json 파일입니다.
이제 몇 개의 모듈을 설치해야 합니다.save dev는 개발 의존항으로 저장될 뿐만 아니라 최종 구축을 과도하게 팽창시키지 않습니다.그래서 운행npm install --save-dev webpack webpack-cli.
그러면 아주 간단한 업무 목록을 표시하는 프로그램을 계속 만듭니다.우선, 색인을 설정합시다.html.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To Do List Webpack Demo</title>
</head>

<body>
  <div id="app"></div>

  <script src="app.js"></script>
</body>

</html>
이제 Javascript 코드를 추가하기 전에 응용 프로그램이 무엇을 할지 보여 줍니다.다음은 그것의 모든 기능이다.
function toDoList (list) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = "To Do List";
  list.forEach(item => {
    newElement.append(toDoListEntry(item));
  });
  return newElement;
}

function toDoListEntry (item) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = item;
  return newElement;
}

const toDos = ['Go to store', 'Clean house', 'Feed dogs'];

document.getElementById('app').appendChild(toDoList(toDos));
간단하죠?
이 모든 것을 하나의 파일에 넣을 수 없는 이유는 없지만, 이 두 함수를 각각의 파일로 나누기를 희망합니다.파일 트리에 몇 개의 파일을 추가합시다.지금은 그럴 거예요.

이제 우리는 그것들을 수출입과 연결시키는 데 착수합시다!To Do List Entry 를 살펴보겠습니다.js 우선.
function toDoListEntry (item) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = item;
  return newElement;
}

export default toDoListEntry;
우리는 다른 파일이 볼 수 있는 함수를 내보내기 위해 밑에 export 문장을 추가하기만 하면 됩니다. 기본 설정은 이 파일에서 한 가지만 얻을 수 있기 때문에 이 동작을 더 빨리 완성할 수 있습니다.
이제 To Do List와 같은 일을 합시다.회사 명
import toDoListEntry from "./toDoListEntry.js";

function toDoList (list) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = "To Do List";
  list.forEach(item => {
    newElement.append(toDoListEntry(item));
  });
  return newElement;
}

export default toDoList;
toDoListEntry의 기본 내보내기에 액세스하기 위해 파일 맨 위에 import 문구를 추가했습니다.js.그리고 우리는 이전처럼 forEach 순환에서 그것을 호출할 수 있다.
그리고 우리는 그것을 런던으로 수출했다.
이제 파일 하나만 더 설정하면 됩니다.색인을 봅시다.js.
import toDoList from "./toDoList.js";

const toDos = ['Go to store', 'Clean house', 'Feed dogs'];

document.getElementById('app').appendChild(toDoList(toDos));
우리가 하는 일은 toDoList에서 toDoList를 가져오는 것이다.js는 예전처럼 그것을 호출합니다.
곧 우리는 웹 패키지를 하나 만들어야 한다.구성js.그리고 이렇게 시작합니다.
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.js',
    path: __dirname + 'build',
    publicPath: '/'
}
입구점은 의존 관계도를 구축하기 위해 먼저 볼 파일입니다.
출력은 코드를 컴파일하는 방향이다.파일 이름은 파일 이름이고 경로는 파일을 원하는 폴더입니다.
현재, 실행 npx webpack --config ./webpack.config.js 하면, 코드를 컴파일하고, 응용 프로그램을 가지고 있을 것입니다.js가 폴더를 만드는 중 기다리고 있습니다.그러나 코드를 변경할 때마다 그것을 꺼내야 한다. 이것은 곧 시대에 뒤떨어질 것이다.따라서 가방에 새 스크립트를 추가합시다.json 파일, 우리를 위해 그것을 처리합니다.
"start": "webpack --config ./webpack.config.js --watch"
설정은 설정 파일을 어디서 찾는지만 알려주고, 감시는 모든 파일을 변경할 때 업데이트를 유지하라고만 알려줍니다.이제 npmstart와 응용 프로그램을 실행할 수 있습니다.js 파일이 자동으로 업데이트됩니다!
우리들은 우리의 웹 페이지에 대해 마지막 삶의 질 갱신을 진행할 것이다.구성js 파일.우리는 그것을 개발 모드에 놓을 것이다. 그러면 우리는 진정으로 어떤 오류도 읽고 코드를 디버깅할 수 있다.
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.js',
    path: __dirname + '/build',
  },
  devtool: 'eval-source-map',
  mode: 'development'
}
개발 모드에 설치하면 코드가 축소되는 것을 방지하고 devtool을 "evalsourcemap"으로 설정하면 우리가 존재할 수 있는 모든 오류를 추적하여 쉽게 찾을 수 있습니다.
보시다시피, 비록 이 프로젝트는 매우 작지만, 웹 팩이 필요하지 않을 수도 있지만, 이것은 여전히 이 도구의 유용성을 증명한다.프로젝트가 점점 커지면서 웹 팩은 코드의 조직성과 외관을 원활하게 유지하는 데 도움을 줄 것입니다!
excel 작업표 보호 해제
Go(Golang)를 사용하여 GraphQL API 서버 생성 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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