webpack

目的

webpackを使用してリアルタイムのパッケージプレビュー効果を実現できます

webpackリアルタイムパッケージ

目標：リアルタイムのパッケージプレビュー効果を実現すること。コードを変更したら、すぐにパッケージ化コマンドを実行して効果を表示します。

ツール：[webpack-dev-server]

注意：

プロジェクト開発では、srcディレクトリ内のファイルを更新します。distにパッケージ化されているファイルは変更しないでください。
src内のファイルを変更した後、対応する効果を確認する前に、ファイルを再パッケージ化する必要があります。

ステップ：

インストール

npm i webpack-dev-server  -D
-------------------------------
+ [email protected]
added 395 packages from 272 contributors in 62.727s

webpack.config.jsで次の設定を行います

module.exports = {
      
      
    // 配置 webpack-dev-server的选项
    devServer: {
      
      
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    }
    // 其它配置
}

package.jsonにスクリプトを追加します
```
"scripts": {
+    "dev":"webpack-dev-server",
  },
```
上記の開発は変更できます。
開始コマンド

これでnpm run dev、リアルタイムパッケージ、リアルタイムコンパイラ、ブラウザを使用して、リアルタイムの効果を表示できるようになりました。ブラウザウィンドウが自動的に開きます。

エラーが報告された場合、考えられる理由の1つは次のとおりです。webpackのバージョンwebpack-cli（高すぎる）が現在のバージョンのwebpack-dev-serverと矛盾しています。webpackとwebpack-cliのバージョンを設定する必要があります（最新のものは使用しないでください）

アプローチは次のとおりです。
1. package.jsonでwebpackとwebpack-cliの設定を見つけ、バージョン番号を次のように変更します。
```
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
```
2.を実行npm iすると、現在の変更に応じて、対応するバージョンのwebpackとwebpack-cliがダウンロードされます。
テスト
- .jsコードを変更し、
- .cssコードを変更して、再起動するかどうかを確認します

注意：

ブラウザに表示されるリアルタイムの効果は内存、サーバーによって「」を介して提供されます。物理ファイルはなく、distディレクトリは生成されません。

欠点がある場合
は、継続するようにアドバイスしてください。更新を続けてください。
一緒に進歩しましょう！

フロントエンドおよびモバイル開発---- webpack ---- webpack-dev-server-リアルタイムパッケージ

webpack

webpackリアルタイムパッケージ

おすすめ