WebPack 2.1介绍教程不转换导入

Question

我正在关注位于https://webpack.js.org/get-started/

的WebPack 2.1的介绍教程

它很简单，很快，但是生成的捆绑包并未将import _ from 'lodash';转换为任何内容 - 它包含在书面上 - 因此，当我打开index.html页面时，我会在Web浏览器中遇到一个错误。

我确实尝试添加以下软件包：

• babel-loader
• 巴别派
• babel-preset-es2015

我尝试在此处注明的模块：https：//webpack.js.org/conepts/#loaders

这些都没有改变输出。我也尝试了其他一些小事情，但希望保持尽可能狭窄的范围。

主要问题：此教程示例是否可以编写？

次要问题：如果没有，如何修复它...

Answer 1

确保您已经安装了仍在beta中的webpack 2。

如果运行npm install --save-dev webpack，您现在将获得不支持ES6单独导入的WebPack 1。这是Webpack 2的新功能。

您可以检查已安装的WebPack版本：
./node_modules/.bin/webpack -v

Answer 2

如果您想要一个有效的教程并且确实可以让您使用WebPack，请执行此操作：

http://webpack.github.io/docs/tutorials/getting-started/

我会怀疑一个包含lodash的教程，因为这使您很快就离开了"入门"的领域（我对Lodash没有任何反对，但是与WebPack Hello World有什么关系）。

我也认为您要做的事情可能涉及script_loader。但同样，请坚持上面发布的教程链接。完成后，我认为您将看到如何包含外部脚本等。

Answer 3

在webpack.config.js文件中，添加以下功能：

module: {
    loaders: [
      {
        test: /.(js|jsx)$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }

如果您遵循教程，则还需要添加以下软件包（显然是），如https://github.com/babel/babel/babel-loader（此主题在此处涉及此主题https：//webpack。

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

整个完整的webpack.config.js文件看起来像：

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {
        test: /.(js|jsx)$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};