webpack-dev-server 배포, 설정

webpack-dev-server를 도입하여 개발을 효율적으로 만듭니다.

이하, 기사의 계속이 되고 있습니다.
자신의 환경으로 읽는 것이 귀찮은 분은, 이하 기사도 참고에 읽어 봐 주세요.
webpack 일 시작

webpack-dev-server를 도입하는 이점

webpack-dev-server는 webpack을 사용한 프런트 엔드 개발 시 사용할 수 있는 개발 환경용 웹 서버입니다.

webpack의 번들 대상의 파일을 번들할 때마다 webpack 커멘드 박는 것은 귀찮다. 브라우저의 시작, 렌더링 결과의 확인도 효율적으로 하고 싶다.

위에서 개발할 때 좀 불편한 점을 해결하기 위해 webpack-dev-server 를 사용합니다.

개발시 편리한 패키지이므로 시도해 봅시다.
htps : // 기주 b. 코 m / ぇ b 파 CK / 우 ぇ b 빠 쿠 - v-se r ゔ ぇ r

도입해 보자

설치합니다.

//最新のバージョンを確認してみる
$npm info webpack-dev-server
//インストール
$npm install --save-dev [email protected] 

시작합니다.

 $npx webpack-dev-server

위의 명령으로 스쿠쇼에 있는 것과 같은 경로가 표시되므로 액세스해 봅시다. (경로는 적절하게 읽어주세요)

http://localhost:8081/

그러면 이와 같은 화면이 나타납니다.

페이지에 액세스하려면 경로를 지정합시다.

http://localhost:8081/dist/

경로를 지정하여 페이지에 액세스하는 것도 번거롭습니다. 그런 다음 설정 파일을 편집하여 좀 더 사용하기 쉬운 형태로 개선합시다.

일단, ctrl + C 로 webpack-dev-server 는 떨어뜨려 둡시다.

문서 루트 설정

그럼, webpack-dev-server 기동시, 브라우저를 기동해, 문서 루트에 액세스 하는 설정을 써 봅시다.

설정은 webpack.config.js 에서 실시합니다.

webpack.config.js

// 出力は絶対pathで指定しなければいけない為、node.jsのpathモジュールを使用する
const path = require('path');
const outputPath = path.resolve(__dirname, 'dist');

module.exports = {
    // バンドルするファイルを指定
    entry: './src/index.js',
    output: {
        // バンドルしてmain.jsとして出力
        filename: 'main.js',
        path: outputPath
    },
    // webpack-dev-serverを立ち上げた時のドキュメントルートを設定
    // ここではdistディレクトリのindex.htmlにアクセスするよう設定してます
    devServer: {
        contentBase: outputPath
    }
}

다음 명령을 실행해 봅시다. --openオプション 를 추가하면 동시에 브라우저를 시작할 수 있습니다.

명령 실행과 동시에 브라우저가 시작되고 문서 루트에 설정된 페이지가 표시됩니다.

$npx webpack-dev-server --open

또, webpack-dev-server는, 번들 대상 파일의 동적인 갱신에 추종해 webpack에 의한 번들이 실시간으로 실행해 줍니다.

시도로 utilities.js를 변경해보십시오.

utilities.js

// ある数字を引数として与えるとその数字の２乗の数を返す
export function double(num) {
    return num**2;
}

// 変更してみる
export const NAME = 'バンドルされてる？';

브라우저에서 log를 확인하면 이렇게 실시간으로 업데이트된 것을 확인할 수 있었을 것입니다.


이와 같이 webpack-dev-server가 파일을 감시해주는 것으로 업데이트를 검지하고 webpack에 의한 모듈 번들을 실시합니다.

webpack-dev-server는 응용 프로그램 개발시 유용한 도구라고 생각합니다. 꼭 시도해보십시오.

webpack dev server 공식Doc