webpack入门，导入错误答案

【问题标题】：Webpack getting started, import errorwebpack入门，导入错误
【发布时间】：2017-04-08 03:24:51
【问题描述】：

我开始使用 Webpack，但已经遇到以下问题：我创建了一个 app/index.js 文件（如文档中所述）。我还创建了一个 index.html 文件（从文档中复制了 HTML 和 CSS）。我在 CLI 中运行了正确的命令（包括生成 dist/bundle.js 文件）。

代码：

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="UTF-8">
        <title>Webpack</title>
        <!-- <script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script> -->
        <script src="dist/bundle.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- Markup here -->
        <div id="root"></div>

        <!-- <script src="app/index.js" type="text/javascript"></script> -->
    </body>
</html>

JS：

// To bundle the lodash dependency with the index.js, we need to import lodash.
import _ from 'lodash';

function component () {
    var element = document.createElement( 'div' );

    /* lodash is required for the next line to work */
    element.innerHTML = _.map( [ 'Hello, webpack' ], function( item ) {
        return item + ' ';
    });

    return element;
}

document.body.appendChild( component() );

这会返回以下控制台错误：bundle.js:48 Uncaught SyntaxError: Unexpected token import

如何让它正确运行？

【问题讨论】：

你需要 Babel 来转译 ES6 语法
你可以在这里找到关于 Webpack 和 Babel 的教程：data-blogger.com/2017/04/07/…

标签： javascript html npm webpack babeljs

【解决方案1】：

正如建议的那样，您需要设置 Babel 才能使其正常工作。

安装 babel 依赖：

    npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015

您需要编辑 webpack.config.js 文件以包含 babel 加载程序设置：

var webpack = require('webpack');

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

【讨论】：

感谢您的回答。但是我在哪里可以找到 webpack.config.js 文件？我查看了 node_modules/webpack 文件夹，但在那里找不到。
您自己直接在目录结构的根目录中定义它。这是与 node_modules 相同的文件夹级别但不是 inside 它
哦，我就是这么做的。不会改变任何东西。
您的组件文件是保存为 .js 还是 .jsx？如果您的文件仅保存为 .js，您可以将 'test' 行修改为 >>> test: /\.js$/,
现在我收到npm ERR! code LIFECYCLE 错误。在其他问题上据说这是由于 sass 或 JS 文件中的语法错误造成的。但是我从 Webpacks 自己的入门指南中复制了 JS 和其他所有内容。有点烦人，我遇到了所有这些错误和东西，只是为了依赖管理：/