webpack-dev-server の構成と使用手順の詳細な説明

今回は、webpack-dev-server の設定と使用手順の詳細な説明と、webpack-dev-server の設定と使用の注意事項 について説明します。実際のケースを見てみましょう。 。

1WebPack-dev-server をインストールします

ターミナルに

npm i webpack-dev-server

と入力して webpack-dev-server パッケージをインストールします

2. パッケージ内のスクリプトで dev-server

を構成します。 json ファイル コードを追加

"dev":"WebPack-dev-server --config webpack.config.js”

webpack.config.js ファイルにグローバルに追加

target:"web"

ターミナル入力

npm i cross-env

env をインストール

環境を設定

変数

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

webpack.config.JS ファイルにステートメントを追加

const isDev = process.env.NODE_ENV ==='development'

判定はDev 値がdevelopmentに等しいか

module.exportsを定数設定に変更しステートメントを追加

module.exports = config

簡単に設定を変更できます

webpack.config.jsにステートメントを追加

if（isDev）{
 config.devtool =“＃廉价模块-EVAL-源映射”//代码映射
 config.devServer = {
  port:8000,//启动服务监听端口
  host:'0.0.0.0'，//可以通过localhost访问
  overlay:{//在页面上显示错误信息
   errors：true，
   },
   open:true，//启动webpack-dev-server时自动打开浏览器
   hot:true //启用热更
 } 
 config.plugins.push(
  new webpack.HotModuleReplacementPlugin()，
  new webpack.NoEmitOnErrorsPlugin()//热更相关插件
 )
}

3． HTML ページを作成します

ターミナル入力

npm i html-webpack-plugin

html-webpack-plugin プラグインをインストールします

webpack.config.js にステートメントを追加します

const HTMLPlugin = require('html-webpack-plugin')

設定

 plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HTMLPlugin()
  ]

上記の手順を完了したら、ターミナル入力

npm run dev

パッケージ化が完了したら、ブラウザを開き、アドレス localhost: 8000 を入力してページに入ります

この記事の事例を読んだ後は、方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 phpの中国語サイトです！

推奨書籍:

Webpack + React 開発環境を構築する方法

React ファミリー バケット環境を構築する方法

以上がwebpack-dev-server の構成と使用手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。