标签：node-js webpack bundle javascript

我试图通过WebPack在浏览器中使用node_modules.我已经阅读了教程和开始的步骤,但仍然遇到困难.

我已经使用webpack在下面的webpack配置中生成bundle.js,并且在Chrome浏览器中转到我的index.html时出现错误：

未捕获的ReferenceError：require未定义
    < anonymous>. (bundle.js：205)

要使浏览器重新组合,我还需要执行哪些其他步骤？

index.html

<script src="bundle.js"></script>

<button onclick="EntryPoint.check()">Check</button>

index.js

const SpellChecker = require('spellchecker');

module.exports = {
      check: function() {
            alert(SpellChecker.isMisspelled('keng'));
      }
};

package.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"
  }
}

webpack.config.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']
                }
            }
        ]
    }
};

解决方法:

在webpack.config.js中,您指定要为Node.js构建此捆绑包：

target: 'node',

并且webpack决定保留要求呼叫,因为Node.js支持它们.如果要在浏览器中运行它,则应使用target：’web’.

标签：node-js,webpack,bundle,javascript
来源： https://codeday.me/bug/20191111/2021712.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。