Question

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

的webpack 2.1的介绍教程

它直截了当且相当快，但生成的捆绑包不会将import _ from 'lodash';转换为任何内容 - 它包含在内 - 因此，我收到了错误信息我打开index.html页面时的Web浏览器。

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

babel-loader
babel-core
巴别预置-ES2015

我尝试添加此处提到的模块：https://webpack.js.org/concepts/#loaders

这些都不会改变输出。我也尝试过其他一些小事，但希望尽可能保持专注。

主要问题：本教程示例是否按书面形式工作？

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

Answer 1

确保您已安装仍处于测试阶段的Webpack 2.

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

您可以查看已安装的网络包版本：
./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-loader的说明添加以下软件包（显然）（此处涉及https://webpack.js.org/concepts/#loaders，但我可以＆＃39;}给出最新版本或者由于其他原因它是否工作时，弄清楚它是否过时了）

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

WebPack 2.1简介教程不转换导入

3 个答案: