Question

我已经尝试过所有内容并阅读有关此错误的每篇文章，但我仍然无法找到有效的解决方案。我无法弄清楚我错过了什么。 Webpack正确处理我的文件并将它们全部捆绑在一起，但是，当我进入浏览器时，我只收到错误。

我完全安装了babel。（我需要Nodemon的babel-cli）

npm i babel-loader babel-cli babel-core babel-polyfill-es2015 --save-dev

我的webpack配置如下：

let path = require( 'path' );
let nodeExternals = require('webpack-node-externals');

module.exports = {
  module: {
  loaders: [
    { test: /\.js$/, loader: 'babel-loader' },
    { test: /\.css$/, loaders: [ 'css', 'babel-loader' ] },
    { test: /\.(jpe?g|png|gif|svg)$/i, 
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
},
    { test: /\.scss$/, loaders: [ 'style', 'css', 'sass', 'babel-loader' ] },
    { test: /\.html$/, loaders: [ 'raw-loader', 'babel-loader' ] }
]
  },
  target: 'node',
  externals: [nodeExternals()],
  entry: {
    app: ['./server/index.js']
  },
  output: {
    path: path.resolve( __dirname, './public/dist' ),
    publicPath: '/',
    filename: 'bundle.js'
  }
};

我已经尝试过使用babel-loader而没有在每次测试中使用它，但它是如何出现的，这是我最后的尝试。

这是我的package.json：

"scripts": { "lint": "eslint server public/**.js index.js", "babel-node": "babel-node --presets=es2015 --ignore='foo|bar|baz'", "start": "nodemon --exec babel-node -- server/index.js" },

这是我的索引HTML文件：

<!DOCTYPE html>
  <html ng-app="app">
  <head>
    <title>App</title>
    <link rel="stylesheet" type="text/css" href="./app/css/semantic/dist/semantic.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="./app/css/styles.css">
 </head>
  <body ng-controller = "navbarCtrl">

    <navbar></navbar>
    <ui-view></ui-view>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

最后，我的.babelrc：

{
  "presets": ["es2015"]
}

无论我到目前为止尝试了什么，我要么输入错误，要么我现在最热门的是Uncaught ReferenceError: require is not defined。提前感谢您帮助我解决这个问题，因为我花了几个小时。

在使用Babel与Webpack和Nodemon时收到此错误:(未捕获ReferenceError：require未定义）

0 个答案: