1
私はHerokuの小さなリアクションアプリを準備する準備をしており、プロダクション設定に取り掛かっています。私が実行するとnpm run buildすべての作品。私が構築されたファイルnode dist/dist.jsを実行するようになったときしかし、私はエラーが表示されます。webpack構築時に 'document'が定義されていないのはなぜですか？
ReferenceError: document is not defined
は、私は別のcssローダーを使用する必要がありますか。次のように 私webpack.deployment.config.jsは次のとおりです。
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'./client/index.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: './dist/'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false
},
sourceMap: true
})
],
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, 'client'),
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{ test: /\.css$/, loader: "css-loader" },
{ test: /\.(jpg|png|svg)$/, use: 'file-loader'}
]
},
};
javascriptコードの何かが、ブラウザでのみ使用できるグローバル変数 'document'にアクセスしようとしています。解決策はnodejsでそのコードを実行しないことですが、そのコードを見ることなく手助けするのは難しいです。 –
それは私にとって理にかなっています。それ以前は、{test：/\.css$/、loader： "style-loader！css-loader"}を使用しているときにウィンドウが未定義になっていました。私はそれがブラウザを持っているので、ビルドを完了し、それを展開することがより理にかなっていると思います。ありがとうございました。 –
Webpackは便利ですが、ガーベージで混乱します。ローカル開発では、 'style-loader'を使うことができます。これは実際にあなたのCSSをjavascriptに変換して実行します。このJavaScriptはページにCSSタグを動的に挿入し、文字列のCSSコンテンツをそこに入れます。実働ビルド（新しいwebpack設定ファイルを作成する必要があります） - ExtractTextPluginと* not *スタイルローダーを使用して、css-loaderだけを使用してcssを実際の別のファイルに引き出します –