Como posso usar o ES6 no webpack.config.js?

Como usar o ES6 no webpack.config? Como este repositório que o https://github.com/kriasoft/react-starter-kit faz?

Por exemplo:

usando isso

import webpack from 'webpack';

ao invés de

var webpack = require('webpack');

É uma curiosidade e não uma necessidade.

Tente nomear sua configuração como webpack.config.babel.js. Você deve incluir o babel-register no projeto. Exemplo em react-router-bootstrap .

O Webpack conta com a interpretação interna para fazer isso funcionar.

Como alternativa ao que o @bebraw sugere, você pode criar um script de automação JavaScript com a sintaxe do ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

E execute-o com babel:

$ babel-node tools/bundle

PS : Chamar o webpack por meio da API JavaScript pode ser uma abordagem melhor (do que chamá-lo por meio de uma linha de comando) quando você precisar implementar etapas de compilação mais complexas. Por exemplo, depois que o pacote do lado do servidor estiver pronto, inicie o servidor de aplicativos Node.js. e logo após o servidor Node.js. inicie, inicie o servidor de desenvolvimento BrowserSync.

Veja também:

• Reagir Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• Reagir estático Boilerplate ( run.js, webpack.config.js, node run)
• Você pode não precisar do Gulp.js

Outra abordagem é ter um script npm assim: "webpack": "babel-node ./node_modules/webpack/bin/webpack"e executá-lo assim: npm run webpack.

Ocorreu um problema ao executar a solução @ Juho com o Webpack 2. Os documentos de migração do Webpack sugerem que você desative a análise do módulo babel:

É importante notar que você desejará que o Babel não analise esses símbolos do módulo para que o webpack possa usá-los. Você pode fazer isso definindo o seguinte nas opções .babelrc ou babel-loader.

.babelrc:

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

Infelizmente, isso entra em conflito com a funcionalidade do registro automático de babel. Removendo

{ "modules": false }

da configuração do babel colocou as coisas em execução novamente. No entanto, isso resultaria em quebra de árvores, portanto, uma solução completa envolveria a substituição das predefinições nas opções do carregador :

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

Edit , 13 de novembro de 2017; snippet de configuração do webpack atualizado para o Webpack 3 (graças a @ x-yuri). Fragmento antigo do Webpack 2:

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

Isso é realmente fácil, mas não foi óbvio para mim com nenhuma das respostas; portanto, se alguém mais estiver confuso como eu:

Basta anexar .babelà parte do seu nome de arquivo antes da extensão (assumindo que você babel-registerinstalou como uma dependência).

Exemplo:

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

Isto é o que funcionou para mim usando o webpack 4:

Em 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"
  ]
}

Você pode ver claramente como cada dependência é usada, portanto não há surpresas.

Observe que estou usando webpack-serve--require , mas se você deseja usar o webpackcomando, substitua-o por webpack --config-register. Em ambos os casos, @babel/registeré necessário para fazer isso funcionar.

E é isso!

yarn dev

E você é capaz de usar es6na configuração!

Para webpack-dev-server, use a --config-registeropção que é igual ao webpackcomando

NOTA:

NÃO é necessário renomear o arquivo de configuração para webpack.config.babel.js(como sugerido pela resposta aceita). webpack.config.jsvai funcionar muito bem.

Mais uma maneira é usar o argumento require para o nó:

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

Encontrado desta maneira em electron-react-boilerplate , veja build-maine build-rendererscripts.

Configuração para Babel 7 e 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'
        },

Renomeie webpack.config.jspara webpack.config.babel.js.

Em seguida, em .babelrc: {"presets": ["es2015"]}

No entanto, se você quiser usar uma configuração diferente do babel para o babel-cli, o seu .babelrc poderá ser algo assim:

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

E no 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",
    ...
  },
  ...
}

É idiota, mas o {"modules": false}pacote web será quebrado se você não usar envs diferentes.

Para mais informações sobre .babelrc, consulte os documentos oficiais .

Para TypeScript : direto de 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

em seguida, escreva seu, por exemplo: 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;

Verifique o link para obter mais detalhes, onde você pode usar um plug-in para ter um arquivo tsconfig separado apenas para a configuração do webpack, se não estiver direcionando o commonjs (que é um requisito para que isso funcione, pois depende do nó ts).

Não tenho representante suficiente para comentar, mas eu gostaria de adicionar a qualquer usuário TypeScript uma solução semelhante ao @Sandrik acima

Eu tenho dois scripts que eu uso apontando para configurações do webpack (arquivos JS) que contêm a sintaxe ES6.

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

e

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

Minha melhor abordagem, juntamente com o script npm, é

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

e configure o restante dos scripts conforme sua exigência de Babel

Depois de toneladas de documentos ...

1. Basta instalar a predefinição es2015 (não env !!!) e adicioná-la ao

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

2. Renomeie seu webpack.config.jsparawebpack.config.babel.js

Usando o Webpack 4 e o Babel 7

Para configurar um arquivo de configuração do webpack para usar o ES2015, é necessário o Babel:

Instale dependências de desenvolvimento:

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

Crie um .babelrcarquivo:

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

Crie sua configuração do 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;

Crie seus scripts em package.json:

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

Corra npm run builde npm start.

A configuração do webpack é baseada em um projeto de amostra com a seguinte estrutura de diretórios:

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

Projeto de amostra: Webpack Configuration Language Using Babel

Adicionar es6 ao webpack é um processo de 3 etapas

1. No webpack.config.js, adicione

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

   2. Crie um .babel.rc e adicione dentro dele

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

3. no pacote.json add

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

Você não pode. Você precisa convertê-lo para CommonJS, com babelou esm.

https://github.com/webpack/webpack-cli/issues/282

Mas você pode correr webpack -r esm @babel/register