Webpack入门，导入错误

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

代码：

<!DOCTYPE html> 
<html lang="nl"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Webpack</title> 
     <!-- <script src="https://unpkg.com/[email protected]" 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

我如何得到这个正确运行？

来源

2016-11-23 erol_smsr

你需要通天transpile的ES6语法 – Phil

你可以在这里找到关于Webpack和Babel的教程：https：//www.data-blogger.com/2017/04/07/building-a-tic-tac-toe-web-app-with-webpack-babel-react -redux/ –

如上所述，您需要安装Babel才能正常工作。

安装通天依赖关系：

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

你需要编辑您的webpack.config.js文件，包括通天装载机设置：

var webpack = require('webpack'); 

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

来源

2016-11-24 00:26:41 Pineda

感谢您的回答。但我在哪里可以找到webpack.config.js文件？我查看了node_modules/webpack文件夹，但在那里找不到它。 –

您可以直接在目录结构的根目录中定义它。这是与node_modules **相同的文件夹级别，但不是_inside _ **它 – Pineda

哦，我刚刚做到了。不会改变任何东西。 –

Webpack入门，导入错误

回答

相关问题