为什么'文档'在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构建上没有定义错误？

回答

相关问题