ES6をwebpack.config.jsで使用するにはどうすればよいですか？

ES6をwebpack.configで使用する方法 このリポジトリのように https://github.com/kriasoft/react-starter-kit はしますか？

例えば：

これを使って

import webpack from 'webpack';

の代わりに

var webpack = require('webpack');

それは必要というよりむしろ好奇心です。

構成にと名前を付けてみてくださいwebpack.config.babel.js。プロジェクトにbabel-registerが含まれている必要があります。react-router-bootstrapでの例。

Webpackはこれを機能させるために内部解釈に依存しています。

@bebrawの提案の代わりに、ES6 +構文を使用してJavaScript自動化スクリプトを作成できます。

// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);

そして、それをbabelで実行します：

$ babel-node tools/bundle

PS：より複雑なビルドステップを実装する必要がある場合は、JavaScript APIを介してwebpackを呼び出す方が（コマンドラインを介して呼び出すよりも）優れたアプローチになる場合があります。たとえば、サーバー側のバンドルの準備ができたら、Node.jsアプリサーバーを起動し、Node.jsサーバーが起動したらすぐに、BrowserSync開発サーバーを起動します。

以下も参照してください。

• スターターキットは、反応します（package.json/scripts、tools/bundle.js、tools/webpack.config.js）
• 静的ボイラープレートを反応させます（run.js、webpack.config.js、node run）
• Gulp.jsは必要ないかもしれません

もう1つのアプローチは、次のようなnpmスクリプトを作成して、"webpack": "babel-node ./node_modules/webpack/bin/webpack"それを次のように実行することですnpm run webpack。

@JuhoのソリューションをWebpack 2で実行する際に問題が発生しました。Webpackの移行ドキュメントでは、バベルモジュールの解析を無効にすることをお勧めしています。

Webpackがそれらを使用できるように、これらのモジュールシンボルを解析しないようにBabelに指示することに注意することが重要です。これを行うには、.babelrcまたはbabel-loaderオプションで以下を設定します。

.babelrc：

{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}

残念ながら、これは自動バベル登録機能と競合します。除去

{ "modules": false }

babel configから物事が再び実行されました。ただし、これはツリーの揺れを壊す結果となるため、完全なソリューションにはローダーオプションのプリセットの上書きが含まれます。

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

編集、2017年11月13日。webpack設定スニペットをWebpack 3に更新しました（@ x-yuriに感謝）。古い、Webpack 2スニペット：

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

これは本当に簡単ですが、どの回答からも私には明白ではなかったので、他の誰かが私のように混乱している場合：

.babelファイル名の拡張子の前の部分に追加するだけです（babel-register依存関係としてインストールされいると）。

例：

mv webpack.config.js webpack.config.babel.js

これは、webpack 4を使用して私のために働いたものです。

でpackage.json：

"scripts": {
    "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},

"devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/register": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},

"babel": {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

各依存関係がどのように使用されているかがはっきりとわかるので、そこに驚きはありません。

注webpack-serve--requireを使用していますが、webpack代わりにコマンドを使用する場合は、に置き換えてくださいwebpack --config-register。どちらの場合も、@babel/registerこれを機能させるにはが必要です。

以上です！

yarn dev

そして、あなたはes6設定で使用することができます！

には、コマンドと同じオプションをwebpack-dev-server使用し--config-registerますwebpack

注意：

構成ファイルの名前を変更する必要はありませんwebpack.config.babel.js（承認された回答で提案されているとおり）。webpack.config.jsうまくいきます。

もう1つの方法は、ノードにrequire引数を使用することです。

node -r babel-register ./node_modules/webpack/bin/webpack

electron-react-boilerplateでこの方法を見つけたのでbuild-main、build-rendererスクリプトを見てください。

以下のためのコンフィギュレーションバベル7＆WebPACKの4

package.json

    ...
    "scripts": {
        "start": "webpack-dev-server --env.dev",
        "build": "webpack --env.prod",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.0.0",
        "babel-loader": "^8.0.0",
        ...
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0",
        "webpack-config-utils": "^2.3.1",
        "webpack-dev-server": "^3.1.8"

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

webpack.config.babel.js

import webpack from 'webpack';
import { resolve } from 'path';

import { getIfUtils, removeEmpty } from 'webpack-config-utils';

export default env => {
    const { ifProd, ifNotProd } = getIfUtils(env);

    return {
        mode: ifProd('production', 'development'),
        devtool: ifNotProd('cheap-module-source-map'),
        output: {
            path: resolve(__dirname, ifProd('prod', 'dev')),
            filename: 'bundle.js'
        },

名前webpack.config.jsをに変更しwebpack.config.babel.jsます。

次に.babelrcで： {"presets": ["es2015"]}

ただし、babel-cliに別のbabel構成を使用する場合、.babelrcは次のようになります。

{
  "env": {
    "babel-cli": {
      "presets": [["es2015", {"modules": false}]]
    },
    "production": {
      "presets": ["es2015"]
    },
    "development": {
      "presets": ["es2015"]
    }
  }
}

そしてpackage.jsonで：

{
  "scripts": {
    "babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
    "build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
    ...
  },
  ...
}

それは馬鹿だけど{"modules": false}、あなたが別のENVSを利用していない場合はWebPACKのを中断します。

.babelrcの詳細については、公式ドキュメントを確認してください。

以下のための活字体：ストレートからhttps://webpack.js.org/configuration/configuration-languages/

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server

次に、例えば、webpack.config.tsを記述してください。

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

export default config;

commonjsを対象としていない場合は、プラグインを使用してwebpack構成専用のtsconfigファイルを個別に作成できる詳細については、リンクを確認してください（これは、ts-nodeに依存しているため、これが機能するための要件です）。

コメントするのに十分な担当者がいませんが、上記の@Sandrikと同様の解決策をTypeScriptユーザーに追加したいと思いました

ES6構文を含むwebpack構成（JSファイル）を指すスクリプトを2つ使用しています。

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

そして

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

npmスクリプトと一緒に私の最高のアプローチは

node -r babel-register ./node_modules/webpack/bin/webpack

そして、Babelの要件に従って残りのスクリプトを設定します

大量のドキュメントの後...

1. es2015プリセット（env !!!ではなく）をインストールして、

   .babelrc:
   {
       "presets": [
            ["es2015", { "modules": false }]
       ]
   }
   

2. の名前webpack.config.jsをwebpack.config.babel.js

Webpack 4とBabel 7の使用

ES2015を使用するようにwebpack構成ファイルをセットアップするには、Babelが必要です。

開発依存関係をインストールします。

npm i -D  webpack \
          webpack-cli \
          webpack-dev-server \
          @babel/core \
          @babel/register \
          @babel/preset-env
npm i -D  html-webpack-plugin

.babelrcファイルを作成します。

{
  "presets": ["@babel/preset-env"]
}

Webpack設定を作成しますwebpack.config.babel.js。

import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = {
  mode: 'development',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    })
  ],
  resolve: {
    modules: [_resolve(__dirname, './src'), 'node_modules']
  }
};

export default config;

でスクリプトを作成しますpackage.json。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

を実行npm run buildしnpm startます。

webpack設定は、次のディレクトリ構造を持つサンプルプロジェクトに基づいています。

├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── Greeter.js
│   ├── index.html
│   └── index.js
└── webpack.config.babel.js

サンプルプロジェクト：Babelを使用したWebpack構成言語

Webpackへのes6の追加は3ステップのプロセスです

1. ではwebpack.config.js追加

   module:{
   
             rules:[
               {
                 test: /\.js$/,
                 loader: 'babel-loader'
               }
             ]
          }
   

   2. .babel.rcを作成し、その中に追加します

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}

3. でpackage.jsonのアドオン

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
npm install babel-loader --save-dev