WebPack-Dev-Server 错误：未定义要求答案

【问题标题】：WebPack-Dev-Server error: require is not definedWebPack-Dev-Server 错误：未定义要求
【发布时间】：2017-01-20 11:31:52
【问题描述】：

Webpack 本身工作正常，但 webpack-dev-server 却不行。基本上，webpack 为我创建了 2 个构建文件，一个后端包和一个前端包。所以，我为每一个都有一个 webpack-config.js。我想用 webpack-dev-server 开发我的前端代码，你可以从下面我的 front-end-bundle.js 的 webpack-config 文件中看到。当我运行 web-pack-dev 服务器时，它能够找到并构建我的 front-end.js 和 index.html，但控制台中没有呈现任何内容，它给了我一个 "Uncaught ReferenceError: require is not defined "

// var nodeExternals = require('webpack-node-externals');
var webpack = require('webpack');

module.exports = {
entry: './browser/entry.js',
output: {
    path: './builds',
    filename: 'frontend.js'
},
plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"development"'
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': '"development"'
        }
    })
],
module: {
    loaders: [
        {
            test: [/\.es6$/, /\.js$/, /\.jsx$/],
            exclude: 'node_modules',
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-1']
            }
        }, 
        {
            test: /\.json$/,
            loader: 'json-loader'
        }, 
        {
            test: /\.html$/,
            loader: 'html-loader'
        }, 
    ]
},
resolve: {
    extensions: ['', '.js', '.es6', '.json'], 
    root: '/Users/johnhenry/Desktop/GAMR/gamr/browser'
}, 
devServer: {
    contentBase: 'builds/dev-build'
},
target: 'node',
// externals: [nodeExternals()]
}

在我的前端构建中这个错误是由这个触发的（它只在开发服务器构建中，而不是在非开发服务器的webpack构建中）：

function(module, exports) {

module.exports = require("url");

如果有人对此有见解，将不胜感激

【问题讨论】：

标签： node.js webpack webpack-dev-server

【解决方案1】：

尝试添加：

target: 'web'

到你的模块块。

【讨论】：

对我来说，这会引发 无法解析 'fs'。 node: { fs: "empty", } 建议抛出 _fs2.default.readFileSync 不是函数。见this。
我知道我已经投了赞成票，但这也为我解决了 webpack-dev-middleware 的“要求未定义”问题。谢谢！

【解决方案2】：

我遇到了同样的错误，如果有人仍在为此苦苦挣扎，这个解决方案也对我有帮助：

...有两种方法可以解决这个问题：

1. （推荐）不要在你的 Webpack 浏览器配置中激活 webpack-node-externals，而是让 Webpack 确实捆绑这些模块定位网络时（这可能是您想要做的）

在浏览器中以其他方式加载外部模块，并将适当的 importType 标志添加到 webpack-node-externals 配置（脚本为 var 或 AMD 为 amd）

【讨论】：

【解决方案3】：

当来自节点应用程序的 webpack.config.js 用于 React 应用程序的基础时，我遇到了这个问题。

我有以下：

target: 'web'

但还是遇到了同样的问题。

删除对 webpack-node-externals 的引用解决了这个问题，当您考虑 node-externals 实际在做什么时，这确实是有道理的。

【讨论】：

【解决方案4】：

我的 webpack.config.js 中有以下规则

 rules: [
        {
            test: /\.js$/,
            use:['script-loader']
        }
    ]

从 webpack.config.js 中删除上述规则消除了错误。

希望这会有所帮助。

【讨论】：