webpack-4-開発

公式サイトのアドレス:webpack公式サイト
1ソースマップ
検索エラーと警告を容易にするために、JavaScriptはソースマッピングを提供します.
webpack.co.nfig.js

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname,'dist')
    },
    ...
+   devtool: 'inline-source-map'
};

この文を加えるだけで、間違いを見つけたら、具体的にどのjsのどの行が間違っているのかを教えてくれます.
2観察モードを使用する
このモードを使用すると、コードの修正後に再コンパイルが必要なくなり、自動的に該当するファイルが更新されます.モニターの変更が完了したらブラウザで画面を更新すればいいです.このモードは使いやすいです.package.json

"scripts":  {
	"watch": "webpack --watch"
}

webpack.co nfig.js Cleean WebpackPluginプラグインにパラメータを追加します.

plugins: [
	new CleanWebpackPlugin({cleanStaleWebpackAssets: false}) //                  ，            
]

はい、こんなに簡単です.
3 webpack-dev-serverを使う
このwebpack-dev-serverは、簡単なWebサーバとリアルタイムで再ロードする機能を提供します.
これを使うと、コードが変わったら自動的にモニターし、ブラウザも自動的にインストールを更新します.

npm install --save-dev webpack-dev-server

webpack.co.nfig.js

module.exports  = {
	devServer: {
		//    webpack-dev-server   dist          localhost:8080。
		contentBase: './dist'
	}
}

package.json

"scripts": {
	"start": "webpack-dev-server --open"
}

npm start(またはnpm run start)を使って実行します.ブラウザが自動的にページを読み込むのを見ます.ソースファイルを変更して保存したら自動的にコンパイルして実行します.ブラウザは自動的にロードされます.
4 webpack-dev-middleware
webpack-dev-middlewareは、webpackで処理されたファイルをサーバに送信します.webpack-dev-serverの内部で使用しますが、必要であれば、単独のパッケージとして使用できます.より多くのカスタム設定が可能です.webpack-dev-middlewareとExpressサーバの結合例を見ます.
例は公式サイトを見ればいいです.