web-dev-qa-db-ja.com

Webpack Babel-loaderはeval（）でコードを変換します

WebpackとBabelに問題があります。 JavaScriptコードをバンドルファイルにトランスパイルしようとしています。ファイル構造とスニペットは次のとおりです。

ファイル構造：

- src
| file.js
package.json
webpack.config.js

package.json：

{
  "name": "babel-webpack-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js：

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    }
                ]
            }
        ]
    }
}

webpack --mode developmentと入力すると、ディレクトリbuild内にファイルapp.bundle.jsが正常に作成されます。

enter image description here

ただし、build/app.bundle.jsのコードを探しているsrc/file.jsの最後に、次のコードがあるため、正しく機能していないようです。

/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nvar fun = function fun() {\n  return console.log('Hello World');\n};\n\n//# sourceURL=webpack:///./src/file.js?");

/***/ })

どちらがおかしいです、私は代わりにこれを単に持っていることになっていないのですか？

/***/ (function(module, exports, __webpack_require__) {

"use strict";
let fun = () => console.log('Hello World')

/***/ })

設定に問題はありますか？

webpackbabel-loader
7
Ivan

これは実際にはbabelのせいではなく、webpackのせいです。コードをdevtoolするか、ある種のソースマップを使用するかを決定するevalというオプションが必要です。

あなたは以下を探しているかもしれません：

// webpack.config.js (excerpt)
module.exports = {
    // ...
    devtool: 'inline-source-map'
    // ...
};

inline-source-mapはevalを省略し、バンドル内の-よく-インライン化されたソースマップを優先します。ただし、本番環境には使用しないでください;-)

devtoolにはいくつかのオプションがあり、すべてに長所と短所があります。このトピックの詳細については、 公式のwebpackドキュメント を参照してください。

5
Rico Herwig

数え切れないほどの調査の結果、私はついに解決策を見つけました。使用する必要のあるプリセットはbabel-preset-envとenvではありませんです。

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['babel-preset-env'] // <-- here
                        }
                    }
                ]
            }
        ]
    }
}
1
Ivan