webpack과 webpack-serve로 정적 웹 환경 만들기 (deprecated)

webpack-serve 씨. 멘테 모드에 들어간 webpack-dev-server 의 후계인 것 같지만 주위에서 별로 사용하고 있는 사람이 없기 때문에, 자신이 수중에서 사용하고 있는 최저한의 구성을 써 둡니다.

덧붙여 : webpack-serve 도 2계에 버전 업해 , 세세한 곳에서 거동이 바뀌고 있거나 하기 때문에 , 가능한 한 공식 문서를 맞추어 주세요.

추기: webpack-serve는 개발이 멈추고 webpack-dev-server의 개발이 재개되었습니다. 따라서 webpack-dev-server를 사용합시다.

설치

npm inint -y
npm install --save-dev webpack webpack-cli webpack-serve

webpack.config.js 만들기

webpack4에서는 설정 파일이 없어도 움직이지만, 커맨드 라인 옵션으로 bind 라든지 가득 쓰면 package.json 스크립트가 커지고 커밋 차이를 읽는 것이 어려워 결국 있던 것이 좋다는 배우기를 얻는다. 했다.

output 이나 entry 에도 디폴트치가 있지만, 명시적으로 써 두는 편이 메인테이션하기 쉬웠다.

mode 지정은 webpack-serve의 README 참조. 덧붙여 「webpack의 mode를 자동적으로 설정하고 싶다」라고 하는 이슈는 꽤 앞에서 오르고있다. 하지만 닫힌 채 진행하고 있다.

const path = require('path')

module.exports = {
    mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
    entry: path.resolve(__dirname, "index.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    }
}

serve.config.js 만들기

webpack.config.js 에 serve 옵션으로 쓸 수 있지만, 독립 파일이 무엇보다 편리하기 때문이다.

open: true , port:8080 는 옵션.

const serve = require('webpack-serve');
const config = require('./webpack.config.js');
const argv = {}
const options = { config, content: 'public/' ,open: true, port:8080 }

// serve({}, { config });
serve(argv, options);

src/index.js

index.js

var content = document.getElementById("content");
content.innerHTML = "this is content";

public/index.html

index.html

<div id="content"/>
<script src="/main.js" defer></script>

시작

npx webpack-serve

시작할 수 있었다. webpack 사용하고 있는 것은 src/이하의 JS 파일만으로, 특히 변환도 아무것도 하고 있지 않은 상태.

webpack-serve 는 webpack-hot-client 를 이용하고 있으므로, src 내의 파일을 갱신하면 자동적으로 재빌드가 행해져 브라우저로 표시하고 있는 컴퍼넌트가 재기록된다.