爲什麼'文檔'在webpack構建上沒有定義錯誤？

我正準備在Heroku上放置一個小反應應用程序，並且正在進行生產配置。當我運行npm run build所有的作品。然而，當我運行內置文件node dist/dist.js我收到錯誤：爲什麼'文檔'在webpack構建上沒有定義錯誤？

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'} 

    ] 
    }, 
};

來源

2017-09-23 Nick Lee

你的javascript代碼中的某些內容正試圖訪問全局變量'document'，它只能在瀏覽器上使用。解決方法是不要在nodejs中執行該代碼，但如果沒有看到該代碼就很難提供幫助。 –

這對我有意義。在此之前，我在使用{test：/\.css$/，loader：「style-loader！css-loader」}時未定義發佈窗口。我想完成構建並部署它使其具有瀏覽器更有意義。謝謝。 –

Webpack是有用的，但垃圾和混亂。在本地開發中，你可以使用'style-loader'，它實際上可以將你的css轉換爲javascript，並在頁面中動態注入一個css標籤，並將字符串css內容放在那裏（這可以讓你重新加載）。在生產版本（你應該爲此創建一個新的webpack配置文件） - 你使用ExtractTextPlugin和* not * style-loader，只是css-loader，將css拖放到實際的單獨文件中 –

故宮模塊jsdom可以用來製作窗口和文檔在非瀏覽器環境中使用。

來源

2017-09-27 14:34:21 danday74

爲什麼'文檔'在webpack構建上沒有定義錯誤？

回答

相關問題