typeScript에 Webpack 사용
5468 단어 webpackTypeScriptNode.js
1.package.json 추가
npm init -ypackage.json이 생성됨
2.webpack 설치
npm install --save-dev webpack webpack-clinode_module의 폴더와 package-lock.json이 생성됩니다.
※ 작성되는 node_module은 git에 push하지 않는다
3.webpack.config.js를 디렉토리에 추가
webpack.config.js는 webpack 구성 파일입니다.webpack.config.js
const path = require('path'); //requireはimportと同じ扱いでpathはnodejsがもっているモジュール
module.exports = {
entry: './dist/main.js', //一番最初に読み込ませるjsファイル
output: { //生成したファイルをどこに格納するかを指定
filename: 'bundle.js', //生成されるファイル名
path: path.resolve(__dirname, dist), //生成されるファイルの格納ディレクトリ
}
}
4.bundle.js 만들기
npm run buildbundle.js가 생성됩니다.
5. HTML 파일의 기술 변경
js 파일의 로드처를 방금 작성한 bundle.js로 변경(bundle.js에 모든 js 파일의 코드가 정리되어 있기 때문에)
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>
이상으로 종료.
-----------여기부터는 해도 하지 않아도 좋다-------------
· 소스 맵에 js 파일을 표시하려면
1. 현재 상태라면 아래와 같이 검증 툴상에는 bundle.js 밖에 표시되지 않는다.
2. webpack 설정 파일에 devtool : 'inline-source-map'과 추가
webpack.config.js
const path = require('path');
module.exports = {
entry: './dist/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, dist),
},
devtool: 'inline-source-map' //この行を追加
}
3. 다시 build하면 다음과 같이 바뀐다
Reference
이 문제에 관하여(typeScript에 Webpack 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakashun1129/items/72560300a5520cd22b26텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
