WebpackDevServer를 사용하지 않고 Webpack에서 모니터링하는 파일이 변경 될 때 브라우저를 자동으로 다시로드하는 방법

최근에 나는 PHP로 서버 측을 만들고 html에서 webpack으로 번들 한 js를 읽는다는 느낌을하고있었습니다 만, WebpackDevServer로 시작했을 때처럼,
js 파일을 저장 -> 브라우저 자동 리로드를 할 수 없을까 생각하고 구그라고 보면 webpack 플러그인이 있었으므로 소개입니다 m(_ _)m

webpack-livereload-plugin을 사용하면 성공했습니다.

Install

npm i -D webpack-livereload-plugin
# または
yarn add -D webpack-livereload-plugin

webpack.config.js

설정에 추가

webpack.config.js

const LiveReloadPlugin = require("webpack-livereload-plugin");

module.exports = {

    // ...

    plugins: [
        new LiveReloadPlugin()
    ],
};

html에서 다음과 같이로드

<script src="http://localhost:35729/livereload.js"></script>

webpack에서 빌드, -w 또는 --watch 옵션을 사용하여 빌드

yarn webpack -w

이제 Webpack에서 모니터링하는 파일이 변경되면 브라우저가 자동으로 다시로드됩니다.

React로 시도해 보세요.

React로 시도했을 때 자신의 설정입니다

github에도 같은 것을 두고 있습니다 htps : // 기주 b. 코 m / 오쿠무라 켄고 / ぇ b pack ぃゔぇ

yarn add react react-dom
yarn add -D webpack webpack-cli webpack-livereload-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

webpack.config.js

const LiveReloadPlugin = require("webpack-livereload-plugin");

module.exports = {
    mode: process.env.NODE_ENV || "development",
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: [".jsx", ".js"]
    },
    plugins: [
        new LiveReloadPlugin()
    ],
};

src/index.js

import React from "react";
import { render } from "react-dom";
import App from "./App";

render(<App />, document.getElementById("root"));

src/App.jsx

import React from "react";

const App = () => (
    <>Hello</>
);

export default App;

index.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
<script src="dist/main.js" defer></script>
<script src="http://localhost:35729/livereload.js"></script>
<div id="root"></div>

yarn webpack -w #./dist/main.js が出力

이 상태에서 file:///<ディレクトリへのpath>/index.html 등으로 브라우저에서 index.html을 표시합니다.

제 경우에는 PHP의 간단한 서버를 시작하고 index.html을보고 시도했습니다 php -S 0.0.0.0:8080

파일을 저장할 때마다 브라우저가 자동으로 다시 로드할 수 있습니다.
끝까지 읽어 주셔서 감사합니다. m(_ _)m

Reference

이 문제에 관하여(WebpackDevServer를 사용하지 않고 Webpack에서 모니터링하는 파일이 변경 될 때 브라우저를 자동으로 다시로드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okumurakengo/items/74dd7819c7f3709b0f2d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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