webpack에서 tsc -w 같은 것을 사용하고 싶다 (webpack-dev-server)

6561 단어 webpack
현재 bundle.js를 만들 때 다음 명령을 매번 실행합니다.
npm run build
이것은 솔직히 귀찮습니다.

tcs 커맨드의 워치 모드와 같이 자동으로 build 해 주면 편한 것이라고 생각합니다.

그럴 때 사용할 수있는 것이 webpack-dev-server입니다.

ts파일을 편집하여 저장한 순간에 bunsle.js에 반영하여 브라우저를 다시 로드해주는 뛰어난 것입니다.

1.webpack-dev-server 설치

다음 명령을 실행합니다.npm install --save-dev webpack-dev-server

2. 설정 파일에 작성

package.json 의 script 태그안에 이하를 기술합니다.

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"   //これを追加
  },

3. 명령 실행 및 시작

1. 다음 명령을 실행합니다.npm run start
2. 다음과 같이 표시ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/nakashun1129/projects/dailyfoodscore
ℹ ｢wdm｣: Hash: 5c430d94a051915bf398
Version: webpack 4.43.0
Time: 3258ms
Built at: 2020/07/07 16:17:04
localhost:8080에 액세스하면 응용 프로그램 페이지가 표시됩니다.

------여기에서 조금 까다롭습니다------

실은 webpack-dev-server는 기동시에 bundle.js를 작성하고 있습니다.

그러나 로컬 디렉토리에 만들어지는 것은 아닙니다.

응? 무슨 일이야? 라는 느낌이군요.

가능한 한 알기 쉽게 설명합니다.

현재의 파일 구조는 이렇게 되어 있습니다.


dist 폴더 안에 번들 된 js 파일이 있습니다.

이것을 한번 지운 후 다시 webpack-dev-server를 기동시켜 보겠습니다.


어라, 만들 수 없네요. . .

bundle.js는 만들지만 파일은 만들지 않습니다.

응? 무슨 일이야? 네요.

webpack이 내부적으로 가지고 있습니다.

내부적으로 가지고있는 bundle.js에 액세스하는 방법이 있습니다.

URL에 '/budle.js'를 추가하여 액세스할 수 있습니다.


이제 bundle.js가 만들어졌음을 알 수 있습니다.

그러나 localhost:8080에 액세스해도 js 파일이 로드되지 않습니다.

그 이유는 HTML 파일에서의 호출이 다르기 때문입니다.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="dist/bundle.js" defer></script>
</head>

그렇다고 매번 다시 쓰는 것도 번거롭지요. .

webpack은 이것도 해결해줍니다.

구성 파일의 출력에 다음을 추가합시다.

webpack.config.js
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/' //これを記述するとwebpackがどこにbundle.jsを返すかを指定できる
  },

이제 webpack이 HTML 파일에 지정된 호출에서 bundle.js를 반환합니다.

실제로 액세스해 봅시다.


dist/bundle.js가 되었습니까?

이제 ts 파일을 편집하고 저장한 타이밍에 자동으로 bundle.js에도 반영됩니다.

시험에 확인해 봅시다.

main.ts
import { Foods } from "./foods";
console.log('hello'); //これを追加
Foods.getInstance();

이것을 저장한 시점에서 브라우저에도 반영될 것입니다.


문제 없네요.

이런 느낌으로 매우 편리하게 되었습니다.
typescript에서 직접 bundle.js를 만드는 방법
[vue] css-loader를 4.*로 설정하면 esModule option을 끄자.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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