web-dev-qa-db-ja.com

Webpack：webpack-dev-serverを使用してコンパイルし、ディスクに書き込み、静的コンテンツ（js / css）を提供する方法

私のjs/cssコードをビルドし、ディスクに書き込んで、webpack-dev-serverを使用して1つのコマンドで提供したいと考えています。別のサーバーをプロダクションモード用にセットアップしたくありません。どうやってやるの？以下のwebpack.config.jsファイルのコンテンツを共有する：

module.exports = {
watch: true,
entry: [
    './src/index.js'
],
output: {
    path: __dirname +'/dist/',
    publicPath: '/dist/',
    filename: 'bundle.js'
},
module: {
    loaders: [
        {
            exclude:/(node_modules)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},
devServer: {
    historyApiFallback: true,
    contentBase: './'
}
};

以下のpackage.jsonで使用されている起動スクリプトを見つけてください：

"start": "webpack-dev-server --progress --colors"

「npm run start」を実行しています。助けてください。

javascriptnode.jsreactjswebpackecmascript-6
10
JVM

startスクリプト定義を次のように変更できます。

"start": "webpack --watch & webpack-dev-server --inline --progress --colors"。

これにより、webpackの監視と再構築のプロセスがバックグラウンドに送信されるため、webpack-dev-serverで変更したモジュールをホットリロードすることもできます。

編集：

これらのプラグインのいずれかがあなたが望むことをするかもしれません：

11
foundling

新しいwebpack-dev-serverは released であり、writeToDiskオプションをサポートしています。

devServer: {
  writeToDisk: true
}
22
musa

webpack-dev-serverは、Sock.jsと組み合わせて「仮想」Expressサーバーを使用して、マシンで実行されているサーバーをエミュレートします。コンパイルに関して、webpack-dev-serverはコードの変更を検出するたびにbundleを再コンパイルします。ただし、この再コンパイルは、プロジェクトのbuildディレクトリ（または、場合によってはdistディレクトリ）とは対照的に、メモリから提供されます。 docs から：

この構成を使用すると、webpack-dev-serverはbuildフォルダー内の静的ファイルを提供します。ソースファイルを監視し、バンドルが変更されるたびにバンドルを再コンパイルします。

ディスクへの書き込みに関して、webpack-dev-serverはこれを行いません。これは、上で書かれていることによって部分的に対処されています。さらに、次の点にも注意してください。これもWebpackドキュメントからのものです。

この変更されたバンドルは、publicPathで指定された相対パスのメモリから提供されます（APIを参照）。構成されたoutputディレクトリには書き込まれません。バンドルが同じURLパスにすでに存在する場合、メモリ内のバンドルが優先されます（デフォルト）。

ディスクに書き込むには、通常のwebpackモジュールを使用します。もちろん、あなたの質問が示唆しているように、すべての変更後の手動の再コンパイルは面倒です。その雑用に対処するには、watchフラグを含めます。ターミナルから、次のコマンドを実行できます。

$ webpack --watch

ただし、これをNPMスクリプトに委任することを好みます。以下の-wフラグは--watchを書き込むことと同等であることに注意してください。

// NPM `scripts` field:
"watch": "webpack -w"

変更を再コンパイルして出力ディレクトリに書き込むと同時にwebpack-dev-serverを実行する場合は、次のようにNPMスクリプトを追加できます。

"scripts": {
  "serve": "npm run watch && npm run start",
  "start": "webpack-dev-server --progress --colors",
  "watch": "webpack -w"
}

次に、ターミナルで$ npm run serveを実行してこれを実行します。


自動リロードの追加の利便性に興味がある場合は、Webpack構成ファイルのpluginsフィールド内で次のように定義することで実行できます。

new webpack.HotModuleReplacementPlugin()

注：これには、Babelの追加の構成設定が必要になる可能性があります。私があなただったら、私はあなたのバベルローダーからqueryフィールドを取り出し、代わりにあなたのバベル設定を外部の.babelrcファイルに委任します。ホットリロードと互換性のある使用に適したものは次のようになります。

{
  "presets": ["env", "es2015", "react"],
  "plugins": ["react-hot-loader/babel"]
}


余談ですが、目的の構造でプロジェクトを簡単に開始するための boilerplate repo を作成しました。 Webpack設定 は、特に興味があるかもしれません。特に、Webpack 2を採用し、Babel（トランスパイレーション用）、ESLint（構文チェッカー）などの他のビルドツールに加えて、CSS/Sassおよびその他のさまざまなファイル形式のサポートが含まれています。

9
IsenrichO

webpack-dev-serverはメモリからファイルを提供します。webpack-dev-serverを webpack-simple-serve で置き換えることができます。これは、webpackの監視機能を使用し、コンパイル済みファイルをディスクに書き込んで serve-handler 提供します。

0
Yi Kai