WebPack-Dev-Server錯誤：未定義require

Question

Webpack本身工作正常，但webpack-dev-server卻沒有。 基本上，webpack為我創建了2個構建文件，一個后端捆綁和一個前端捆綁。 所以，我為每個人都有一個webpack-config.js。 我想用webpack-dev-server開發我的前端代碼，你可以從我的webpack-config文件中看到我的front-end-bundle.js。 當我運行web-pack-dev服務器時，它能夠找到並構建我的front-end.js和index.html，但是在控制台中沒有任何渲染，它給了我一個“Uncaught ReferenceError：require not 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()]
}

這個錯誤是由我在前端構建中觸發的（它只在dev服務器構建中，而不是在非dev服務器webpack構建中）：

function(module, exports) {

module.exports = require("url");

如果有人對此有所了解，我們將不勝感激

Answer 1

嘗試添加：

target: 'web'

到您的模塊塊。

Answer 2

我有同樣的錯誤，如果有人還在努力解決這個問題，這個解決方案也幫助了我：

......有兩種方法可以解決這個問題：

1.（推薦）不要在你的Webpack瀏覽器配置中激活webpack-node-externals，但是讓webpack確實在定位web時捆綁這些模塊（這很可能是你想做的）

2. 在瀏覽器中以其他方式加載外部模塊，並將相應的importType標志添加到webpack-node-externals配置（對於腳本為var或對於AMD為amd）

更多細節： https ： //github.com/liady/webpack-node-externals/issues/17#issuecomment-284222729

Answer 3

我的webpack.config.js中有以下規則

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

從webpack.config.js中刪除上述規則刪除了錯誤。

希望這可以幫助。

Answer 4

當來自一個節點應用程序的webpack.config.js作為反應應用程序的基礎時，我遇到了這個問題。

我有以下內容：

target: 'web'

但仍然遇到了同樣的問題。

刪除對webpack-node-externals的引用解決了它，當你考慮節點外部實際上正在做什么時這是有意義的。