잘 지내고 싶다.

기본편

개발 환경편 ←지금 코코!!

Loaders편

Plugins 편 곧 공개 예정

Loaders를 쓰려고 생각했습니다만, 개발을 보다 편하게 할 수 있을 것 같기 때문에 그 설정을 여기에 정리합니다

이전 파일 구성을 여기에 올려 둡니다.

 webpack-friendly-basic
 ├ ─ ─ node_ modules
 ├ ─ ─ package.json
 ├ ─ ─ package-lock.json
 ├ ─ ─ dist
 │     ├ ─ ─ bundle.js
 │     └ ─ ─ index.html
 ├ ─ ─ src
 │     ├ ─ ─ js
 │     │     └ ─ ─ app.js
 │     └ ─ ─ modules
 │           ├ ─ ─ add.js
 │           ├ ─ ─ subtract.js 
 │           ├ ─ ─ multiply.js 
 │           └ ─ ─ divide.js       
 └ ─ ─ webpack.config.js

webpack-dev-server

npm install -D [email protected]

이 패키지는 webpack을 사용한 개발에 사용하면 편리한 사람입니다.
이것을 넣으면 개발이 편해지므로 넣습니다.
우선 실행해 보겠습니다.

npx webpack-dev-server

실행하면 이미지처럼 프로젝트 실행 페이지의 URL이 있으므로 액세스하면



이런 페이지라고 생각합니다.
번들 파일을 확인하는 index.html는 /dist에 있기 때문에 그것을 클릭하면 이런 느낌이라고 생각합니다.



이것은 아무 것도 쉽지 않습니다.

다음은 빌드할 때 자동으로 이 브라우저를 열도록 합니다.

npx webpack-dev-server --open

--open를 붙여 자동으로 브라우저를 시작합니다.
수고가 조금 줄었습니다.

자동 재구성

다음은 번들 대상의 파일에 변경이 있을 경우에 자동으로 리빌드가 걸리도록 합니다.
이를 위해 webpack.config.js 설정을 변경합니다.

webpack.config.js

const path = require("path");
const outputPath = `${__dirname}/dist`;

// モジュールどうやって出力するか記述します
module.exports = {
  // 実行環境設定
  mode: "development",
  // エントリー ポイントを決めます
  entry: "./src/js/app.js",
  output: {
    // どこにバンドルファイルを出力するか決まます
    path: outputPath,
    // 出力先のファイル名を決めます
    filename: "bundle.js"
  },
   // 追加設定
  devServer: {
    contentBase: outputPath
  }
};

이 설정을 하면 브라우저가 열렸을 때의 위치를 ​​설정할 수 있습니다.webpack.config.js 변경 내용을 반영

npx webpack

자동 빌드할 개발 환경에서 브라우저를 엽니다.

npx webpack-dev-server --open

브라우저가 열리고 개발자 도구를 확인하고Live Reloading enabled. 라고 표시되면 성공입니다.



이 상태에서 번들된 파일의 app.js 및 modules 파일 변경 내용이 자동으로 반영됩니다.
여기서 주의해야 할 것은
번들 대상이 아닌 index.html 변경 사항은 반영되지 않습니다.

또한 /dist 디렉토리 구성에주의가 필요했습니다.

 dist
 ├ ─ ─ js
 │     └ ─ ─ bundle.js 
 └ ─ ─ index.html

따라서 bundle.js와 index.html의 계층 구조가 동렬이 아닌 경우에는 효과가 없었습니다.

 dist
 ├ ─ ─ bundle.js
 └ ─ ─ index.html

이것이라면 효과가 있습니다.

package.json

마지막으로 webpack-dev-server --open라는 명령을 줄입니다.package.json를 열고 scripts를 변경합니다.

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --open"
  }

start 및 dev 추가
이 설정을 사용하면 터미널에서 런타임 명령을 변경할 수 있습니다.
npx webpack

npm start

npx webpack-dev-server --open

npm run dev

편해졌다.

자신적으로는 이것으로 상당히 편해진 것이 아닐까 생각합니다.

다음은 로더에 대해 씁니다.

뭔가 지적이 있으면 가르쳐 주면 기쁩니다.