Webpack -将节点模块放入Bundle并加载到html文件中

eufgjt7s  于 2023-01-17  发布在  Webpack
关注(0)|答案(1)|浏览(168)

我正在尝试通过WebPack在浏览器中使用node_modules。我已经阅读了教程和开始的步骤,但卡住了。
我使用webpack生成bundle.js,webpack配置如下,在Chrome浏览器中转到index.html时,我收到错误:
Uncaught ReferenceError: require is not defined at Object.<anonymous> (bundle.js:205)
我还需要执行哪些步骤才能重新识别浏览器?

    • 索引. html**
<script src="bundle.js"></script>

<button onclick="EntryPoint.check()">Check</button>
    • 索引. js**
const SpellChecker = require('spellchecker');

module.exports = {
      check: function() {
            alert(SpellChecker.isMisspelled('keng'));
      }
};
    • 包. json**
{
  "name": "browser-spelling",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "node-loader": "^0.6.0",
    "spellchecker": "^3.3.1",
    "webpack": "^2.2.1"
  }
}
    • 网络包配置js**
module.exports = {
    entry: './index.js',
    target: 'node',
    output: {
        path: './',
        filename: 'bundle.js',
        libraryTarget: 'var',
        library: 'EntryPoint'
    },
    module: {
        loaders: [
            {
                test: /\.node$/,
                loader: 'node-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};
wpx232ag

wpx232ag1#

webpack.config.js中,您指定要为Node.js构建此包:

target: 'node',

webpack决定保留require调用,因为Node.js支持它们,如果你想在浏览器中运行它,你应该使用target: 'web'

相关问题