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

210

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.

Whisher
fonte
@Amit é uma pergunta. Eu não consigo entender. Porque se eu usar a sintaxe es6 no webpack.config, recebo erros.
Whisher
21
A questão é como usar o es6 no webpack.config.Parece claro para mim.Eu atualizo minha pergunta com um exemplo.
Whisher 9/08/2015
1
O arquivo é analisado pelo node.js, que não suporta es6 por padrão. Existem sinalizadores de linha de comando para ativar isso, mas não sei o que são. Você também pode tentar usar o io.js. em vez do nó
#
@KJTsanaktsidis obrigado pela dica, mas também tentei com --harmony sem sucesso
Whisher
Eu não tentei isso, mas tente executar "node --harmony which webpack"
KJ Tsanaktsidis 09/08/2015

Respostas:

230

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.

Juho Vepsäläinen
fonte
4
Isso funcionou para mim. I npm runeste script: webpack --config webpack.config.babel.js.
Mat Gessel
9
Eu acho que pode ser capaz de buscá-lo diretamente, mesmo sem ele --config.
Juho Vepsäläinen
4
Eu acho que deveria ser acrescentado que o babel-loadermódulo também é necessária
flipchart
7
Na verdade, ele funciona bem, basta definir suas predefinições de babel em um arquivo .babelrc.
peter
10
Eu usei esse preset específico para chegar a este trabalho:echo '{ "presets": ["es2015"] }' > .babelrc
killthrush
39

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:

Konstantin Tarkus
fonte
2
Embora um pouco complexo, é exatamente isso que o kit de iniciação a reação usa. Deve ser a melhor resposta.
darkbaby123
20

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

alexb
fonte
Este não parece trabalho ao passar uma configuração personalizada para Webpack babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config
Abhinav Singi
16

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 }],
        ],
    },
},
Edo
fonte
2
Hoje em dia (Webpack 3), provavelmente ficaria assim: module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}( gist ). -loadero sufixo não é mais opcional. Tente evitar excludee preferir include. As cadeias de caracteres de inclusão / exclusão funcionam apenas se caminhos absolutos. queryfoi renomeado para options.
X-yuri
Além disso, deixar claro por favor que você não quer {modules: false}em .babelrcser capaz de usar importé no webpack.config.babel.js.
X-yuri
Para o Webpack 4, é -loadernecessário adicionar o sufixo novamente webpack.js.org/migrate/3/…
kmmbvnr 5/18/18
12

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
Dmitry Minkovsky
fonte
1
Não uso o babel porque o próprio webpack já suporta a sintaxe do módulo ES6 e meu projeto não precisa ser compatível com o ES5. É apenas o arquivo de configuração que ainda precisa require. Estranho, não é?
Kokodoko # 28/17
Uau, isso é interessante! Eu não sabia disso. Vou precisar revisitar isso. Estranho que o arquivo de configurações ainda requer exigem
Dmitry Minkovsky
11

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.

smac89
fonte
Parece que o serviço da web foi descontinuado. Alguma idéia de como fazer isso funcionar com o webpack-dev-server? Não estou vendo uma opção --require para ele nos docs: webpack.js.org/configuration/dev-server/#devserver
Crhistian Ramirez
1
@CrhistianRamirez, use a --config-registeropção Também o repo para webpack-servese mudou para cá: github.com/shellscape/webpack-serve
smac89
1
Legal! isso funcionou para mim. Aqui está a aparência do meu script: webpack --config-register @babel/register --config webpack/development.config.jsEu tive que especificar --config porque minha configuração do webpack está em uma pasta. Obrigado!
Crhistian Ramirez
6

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.

Dmitry Glinyanov
fonte
Espetacular - estava apenas olhando para a Electron e iniciando um servidor separado, sua resposta ajudou perfeitamente! :)
Matt
6

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'
        },
keemor
fonte
Isso ainda não funciona para mim, mas o IMHO parece ser o exemplo mais atualizado e quase mais limpo (as entradas relacionadas às propriedades da classe são supérfluas para a tarefa em questão).
rawpower
4

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 .

Peter Tseng
fonte
4

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).

Mark Zhukovsky
fonte
Obrigado por isso, não foi possível obter os módulos trabalhando para o webpack.config.js, mas o prazer de usar o TypeScript é o que funciona.
Paul Watson
3

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"

Dylan Stewart
fonte
2

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

Farhan Ansari
fonte
2

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

Andrew I.
fonte
2

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

tempestade
fonte
2

Adicionar es6 ao webpack é um processo de 3 etapas

  1. No webpack.config.js, adicione

    module:{
    
              rules:[
                {
                  test: /\.js$/,
                  loader: 'babel-loader'
                }
              ]
           }
    
    1. Crie um .babel.rc e adicione dentro dele
{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}
  1. 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
Kirti Chaturvedi
fonte