web-dev-qa-db-ja.com

WebPack-Dev-Serverエラー：requireが定義されていません

Webpack自体は正常に機能していますが、webpack-dev-serverは正常に機能していません。基本的に、webpackは、バックエンドバンドルとフロントエンドバンドルの2つのビルドファイルを作成しました。だから、私はこれらのそれぞれのためのwebpack-config.jsを持っています。以下のfront-end-bundle.jsのwebpack-configファイルからわかるように、webpack-dev-serverを使用してフロントエンドコードを開発したいと思います。 web-pack-devサーバーを実行すると、front-end.jsとindex.htmlを見つけてビルドできますが、コンソールに何もレンダリングされず、"Uncaught ReferenceError：require is not定義済み "

// 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.jswebpackwebpack-dev-server
9
Lorentz9

追加してみてください：

target: 'web'

モジュールブロックに。

6
user1695975

私は同じエラーを抱えていました、そして誰かがまだこれに苦労しているなら、この解決策も私を助けました：

...この問題を解決するには2つの方法があります。

1。 （推奨）Webpackブラウザー構成でwebpack-node-externalsをアクティブ化しないでください。ただし、WebをターゲットにするときにWebpackにこれらのモジュールを実際にバンドルさせてください（これはおそらくあなたがやりたいことです）

  1. ブラウザに他の方法で外部モジュールをロードし、適切なimportTypeフラグをwebpack-node-externals構成に追加します（スクリプトの場合はvar、AMDの場合はAMD）。

詳細はこちら： https://github.com/liady/webpack-node-externals/issues/17#issuecomment-284222729

1
Claudia Dávila

Webpack.config.jsに以下のルールがありました

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

上記のルールをwebpack.config.jsから削除すると、エラーが削除されました。

お役に立てれば。

0
Dheeraj Kumar

この問題は、reactアプリのベースのノードアプリからのwebpack.config.jsで発生しました。

私は以下を持っていました：

target: 'web'

しかし、それでも同じ問題に遭遇しました。

webpack-node-externalsへの参照を削除すると、それが解決されました。これは、node-externalsが実際に何をしているのかを考えるときに意味があります。

0
Liam