Question

这是我的文件夹结构：

src/
└───public/
    ├───index.js
    ├───controllers/
    ├───css/
    ├───js/
    ├───models/
    ├───vendor/
    └───views/
        └───partials/

我知道这不是最好的文件夹结构，但这是我以前的项目之一，我想在上面测试webpack。

无论如何controllers，js，vendor都包含JavaScript代码。

我的webpack.dev.config与src处于同一级别：

const path = require("path");
const common = require("./webpack.common");
const {merge} = require("webpack-merge");   

module.exports = merge(common, {
    target: 'node',
    mode: "development",
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [

    ],
    module: {

    }
});

如您所见，它从webpack.common.js合并：

const nodeExternals = require('webpack-node-externals');
    
module.exports = {
    externals: [nodeExternals()],
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,

            }
        ]
    }
}

目前，我正在HTML文档中对绑定的js文件的位置进行硬编码，但是在浏览器上运行此文件时，我看到消息Uncaught ReferenceError: require is not defined，但不确定如何解决。

这里是index.js：

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 8080;
const exphbs = require('express-handlebars');

const Datastore = require('nedb');
const db = new Datastore({
    filename: path.join(__dirname, 'public/db/pfam.db'),
    autoload: true
});
module.exports.db = db;

app.use(express.static(__dirname + "/public"));
app.set('views', path.join(__dirname, 'public/views'));
app.set('img', path.join(__dirname, 'public/img'));
app.set('js', path.join(__dirname, 'public/js'));
app.set('css', path.join(__dirname, 'public/css'));
app.set('controllers', path.join(__dirname, '/public/controllers'));
app.set('db', path.join(__dirname, '/public/db'));

app.engine('handlebars', exphbs({
    defaultLayout: 'home',
    layoutsDir: path.join(__dirname, '/public/views')
}))

app.set('view engine', 'handlebars');
app.use(require('./public/controllers'))

console.log(`listening on port ... ${port}`)
app.listen(port);

Answer 1

获得Uncaught ReferenceError: require is not defined的原因是因为您的捆绑包包含require关键字，该关键字在浏览器中未定义？

为什么它们包含require ？因为您使用webpack-node-externals中的nodeExternals

从他们的文档中

所有节点模块将不再捆绑在一起，而是保留为 require （“模块”）。

浏览器上的Webpack抱怨要求未定义

1 个答案: